@aws-amplify/ui-react-storage 3.12.2 → 3.13.1

package/dist/{createStorageBrowser-pzJe4BD8.js → createStorageBrowser-DaVWyJzC.js}

@@ -32,7 +32,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const VERSION = '3.12.2';
+const VERSION = '3.13.1';
 
 const toAccessGrantPermission = (permission) => {
     let result = '';
@@ -784,7 +784,7 @@ const NavElement = elements.defineBaseElement({
     type: 'nav',
     displayName: 'Nav',
 });
-elements.defineBaseElement({
+const TextElement = elements.defineBaseElement({
     type: 'p',
     displayName: 'Text',
 });
@@ -919,7 +919,7 @@ function PaginationButton({ isDisabled, onClick, type, }) {
 const Table = ({ headers, rows }) => {
     return (React__namespace["default"].createElement(TableElement, { className: `${STORAGE_BROWSER_BLOCK}__table` },
         React__namespace["default"].createElement(TableHeadElement, { className: `${STORAGE_BROWSER_BLOCK}__table-head` }, headers.length ? (React__namespace["default"].createElement(TableRowElement, { className: `${STORAGE_BROWSER_BLOCK}__table-row` }, headers.map(({ key, content }) => (React__namespace["default"].createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header` }, content))))) : null),
-        React__namespace["default"].createElement(TableBodyElement, { className: `${STORAGE_BROWSER_BLOCK}__table-body` }, rows?.map(({ key, content }) => (React__namespace["default"].createElement(TableRowElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-row` }, content.map(({ key, content, type }) => {
+        React__namespace["default"].createElement(TableBodyElement, { className: `${STORAGE_BROWSER_BLOCK}__table-body` }, rows?.map(({ key, content, active }) => (React__namespace["default"].createElement(TableRowElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-row${active ? ` ${STORAGE_BROWSER_BLOCK}__table-row_active` : ''}` }, content.map(({ key, content, type }) => {
             return type === 'header' ? (React__namespace["default"].createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header`, role: "rowheader" }, content)) : (React__namespace["default"].createElement(TableDataCellElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-data-cell` }, content));
         })))))));
 };
@@ -1049,8 +1049,9 @@ const DataTable = ({ headers, isLoading, rows, }) => {
     });
     const mappedRows = isLoading
         ? []
-        : rows.map(({ key, content }) => ({
+        : rows.map(({ key, content, active }) => ({
             key,
+            active,
             content: content.map(({ key, content, type }) => {
                 switch (type) {
                     case 'button': {
@@ -1146,218 +1147,21 @@ const Navigation$1 = ({ items, }) => {
     return React__namespace["default"].createElement(BreadcrumbNavigation, { breadcrumbs: items });
 };
 
-const OVERWRITE_TOGGLE_ID = 'overwrite-toggle';
-const OverwriteToggle$1 = ({ isOverwritingEnabled, isDisabled, label, onToggle, }) => (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__overwrite-toggle` },
-    React__namespace["default"].createElement(InputElement, { checked: isOverwritingEnabled, disabled: isDisabled, id: OVERWRITE_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
-    React__namespace["default"].createElement(LabelElement, { htmlFor: OVERWRITE_TOGGLE_ID }, label)));
-
-const Pagination$1 = ({ page, hasNextPage, onPaginate, highestPageVisited, }) => {
-    if (!page)
-        return null;
-    return (React__namespace["default"].createElement(NavElement, { "aria-label": 'Pagination', className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination` },
-        React__namespace["default"].createElement(OrderedListElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list` },
-            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
-                React__namespace["default"].createElement(PaginationButton, { isDisabled: page <= 1, onClick: () => {
-                        if (onPaginate)
-                            onPaginate(page - 1);
-                    }, type: "previous" })),
-            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
-                React__namespace["default"].createElement(SpanElement, { "aria-label": `Page ${page}`, "aria-current": "page", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-current-page` }, page)),
-            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
-                React__namespace["default"].createElement(PaginationButton, { isDisabled: !highestPageVisited ||
-                        (page >= highestPageVisited && !hasNextPage), onClick: () => {
-                        if (onPaginate)
-                            onPaginate(page + 1);
-                    }, type: "next" })))));
-};
-
-const SearchField$1 = ({ id, label, clearLabel, submitLabel, onSearch, onClear, placeholder, query = '', onQueryChange, }) => {
-    // FIXME: focus not returning to input field after clear
-    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-        React__namespace["default"].createElement(Field, { id: id, label: label, icon: React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field-icon`, variant: "search" }), className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field`, variant: "search", onChange: (e) => {
-                onQueryChange?.(e.target.value);
-            }, placeholder: placeholder, onKeyUp: (event) => {
-                if (event.key === 'Enter') {
-                    onSearch?.();
-                }
-            }, value: query }, query ? (React__namespace["default"].createElement(ButtonElement, { "aria-label": clearLabel, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field-clear`, onClick: onClear, variant: "refresh" },
-            React__namespace["default"].createElement(IconElement, { variant: "dismiss" }))) : null),
-        React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-submit`, onClick: onSearch }, submitLabel)));
-};
-
-const SEARCH_SUBFOLDERS_TOGGLE_ID = 'search-subfolders-toggle';
-const SearchSubfoldersToggle$1 = ({ isSearchingSubfolders, label, onToggle, }) => (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search-subfolders-toggle` },
-    React__namespace["default"].createElement(InputElement, { checked: isSearchingSubfolders, id: SEARCH_SUBFOLDERS_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
-    React__namespace["default"].createElement(LabelElement, { htmlFor: SEARCH_SUBFOLDERS_TOGGLE_ID }, label)));
-
-const StatusDisplay$1 = ({ statuses, total, }) => {
-    if (!statuses?.length) {
-        return null;
-    }
-    const descriptions = statuses.map(({ name, count }) => ({
-        term: name,
-        details: `${count}/${total}`,
-    }));
-    return (React__namespace["default"].createElement(DescriptionList, { className: `${STORAGE_BROWSER_BLOCK}__status-display`, descriptions: descriptions }));
-};
-
-const Title$1 = ({ title }) => (React__namespace["default"].createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__title` }, title));
-
-const DEFAULT_COMPOSABLES = {
-    ActionCancel,
-    ActionDestination: ActionDestination$1,
-    ActionExit,
-    ActionStart,
-    ActionsList: ActionsList$1,
-    AddFiles,
-    AddFolder,
-    DataRefresh: DataRefresh$1,
-    DataTable,
-    DropZone,
-    FolderNameField: FolderNameField$1,
-    LoadingIndicator: LoadingIndicator$1,
-    Message,
-    Navigation: Navigation$1,
-    OverwriteToggle: OverwriteToggle$1,
-    Pagination: Pagination$1,
-    SearchSubfoldersToggle: SearchSubfoldersToggle$1,
-    SearchField: SearchField$1,
-    StatusDisplay: StatusDisplay$1,
-    Title: Title$1,
-};
-
-function ComponentsProvider(props) {
-    const { children, composables } = props;
-    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elementsDefault },
-        React__namespace["default"].createElement(ComposablesProvider, { composables: composables }, children)));
+function PreviewPlaceholder() {
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-placeholder` },
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-placeholder-content` },
+            React__namespace["default"].createElement(uiReact.Placeholder, { width: "100%", height: "400px" }))));
 }
 
-const OverwriteToggle = ({ isDisabled, isOverwritingEnabled, label = '', onToggle, }) => {
-    return (React__namespace.createElement(uiReact.CheckboxField, { name: label, label: label, labelPosition: "end", isDisabled: isDisabled, checked: isOverwritingEnabled, onChange: () => {
-            onToggle?.();
-        } }));
-};
-const SearchSubfoldersToggle = ({ isSearchingSubfolders, label = '', onToggle }) => {
-    return (React__namespace.createElement(uiReact.CheckboxField, { name: label, label: label, labelPosition: "end", checked: isSearchingSubfolders, onChange: () => {
-            onToggle?.();
-        } }));
-};
-const Pagination = ({ page = 1, onPaginate, hasNextPage, highestPageVisited, }) => {
-    return (React__namespace.createElement(uiReact.Pagination, { currentPage: page, totalPages: highestPageVisited ?? 1, hasMorePages: hasNextPage, siblingCount: 1, onChange: (index) => {
-            onPaginate?.(index ?? 0);
-        }, onNext: () => {
-            onPaginate?.(page + 1);
-        }, onPrevious: () => {
-            onPaginate?.(page - 1);
-        } }));
-};
-const SearchField = ({ onQueryChange, onSearch, onClear, placeholder, label, query, }) => {
-    return (React__namespace.createElement(uiReact.SearchField, { label: label, size: "small", clearButtonLabel: "Clear search", placeholder: placeholder, value: query, onChange: (e) => {
-            onQueryChange?.(e.target.value);
-        }, onSubmit: () => {
-            onSearch?.();
-        }, onClear: () => {
-            onClear?.();
-        } }));
-};
-const Navigation = ({ items }) => {
-    return (React__namespace.createElement(uiReact.Breadcrumbs.Container, null, items.map((item, i) => {
-        return (React__namespace.createElement(uiReact.Breadcrumbs.Item, { key: i },
-            React__namespace.createElement(uiReact.Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name),
-            item.isCurrent ? null : React__namespace.createElement(uiReact.Breadcrumbs.Separator, null)));
-    })));
-};
-const LoadingIndicator = ({ isLoading, }) => {
-    if (isLoading) {
-        return (React__namespace.createElement(uiReact.Loader, { className: "amplify-storage-browser__loader", variation: "linear", size: "small" }));
-    }
-};
-const FolderNameField = ({ onChange, label, placeholder, validationMessage, onValidate, }) => {
-    const handleValidate = ({ target: { value }, }) => {
-        onValidate?.(value);
-    };
-    return (React__namespace.createElement(uiReact.TextField, { label: label, placeholder: placeholder, errorMessage: validationMessage, hasError: !!validationMessage, onBlur: handleValidate, onChange: (event) => {
-            const { value } = event.target;
-            handleValidate?.(event);
-            onChange?.(value);
-        } }));
-};
-const DataRefresh = ({ onRefresh, }) => {
-    return (React__namespace.createElement(uiReact.Button, { onClick: () => {
-            onRefresh?.();
-        }, "aria-label": "Refresh data" },
-        React__namespace.createElement(IconElement, { className: "amplify-icon", variant: "refresh" })));
-};
-const ActionsList = ({ items, onActionSelect, isDisabled, }) => {
-    return (React__namespace.createElement(uiReact.Menu, { isDisabled: isDisabled, trigger: React__namespace.createElement(uiReact.Button, { ariaLabel: "Menu Toggle" },
-            React__namespace.createElement(IconElement, { className: "amplify-icon", variant: "menu" })) }, items
-        .filter(({ isHidden }) => !isHidden)
-        .map(({ actionType, icon, label, isDisabled }, i) => {
-        return (React__namespace.createElement(uiReact.MenuItem, { key: i, size: "small", gap: "xs", isDisabled: isDisabled, onClick: () => {
-                onActionSelect?.(actionType);
-            } },
-            icon && React__namespace.createElement(IconElement, { variant: icon }),
-            label));
-    })));
-};
-const StatusDisplay = ({ statuses, total, }) => {
-    if (!statuses?.length) {
-        return null;
-    }
-    return (React__namespace.createElement(uiReact.View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__status-display` }, statuses.map(({ name, count }, i) => (React__namespace.createElement(uiReact.View, { as: "div", className: `${STORAGE_BROWSER_BLOCK}__status`, key: i },
-        React__namespace.createElement(uiReact.View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__status-label` }, name),
-        React__namespace.createElement(uiReact.View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__status-value` }, `${count}/${total}`))))));
-};
-const ActionDestination = ({ isNavigable, items, label, }) => {
-    if (!items.length) {
-        return null;
-    }
-    return (React__namespace.createElement(uiReact.View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__destination` },
-        React__namespace.createElement(uiReact.View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__destination-label` }, label),
-        React__namespace.createElement(uiReact.View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__destination-value` },
-            React__namespace.createElement(uiReact.Breadcrumbs.Container, null, items.map((item, i) => {
-                return (React__namespace.createElement(uiReact.Breadcrumbs.Item, { key: i },
-                    isNavigable ? (React__namespace.createElement(uiReact.Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name)) : (item.name),
-                    item.isCurrent ? null : React__namespace.createElement(uiReact.Breadcrumbs.Separator, null)));
-            })))));
-};
-const Title = ({ title }) => {
-    return (React__namespace.createElement(uiReact.Heading, { className: `${STORAGE_BROWSER_BLOCK}__title`, level: 2 }, title));
-};
-const componentsDefault = {
-    ActionDestination,
-    ActionsList,
-    DataRefresh,
-    LoadingIndicator,
-    Pagination,
-    Navigation,
-    OverwriteToggle,
-    SearchField,
-    SearchSubfoldersToggle,
-    StatusDisplay,
-    FolderNameField,
-    Title,
-};
-
-const Fallback = () => (React__namespace["default"].createElement("div", { className: STORAGE_BROWSER_BLOCK_TO_BE_UPDATED },
-    React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__error-boundary` }, "Something went wrong.")));
-class ErrorBoundary extends React__namespace["default"].Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(_error) {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-    render() {
-        const { hasError } = this.state;
-        const { children } = this.props;
-        if (hasError) {
-            return React__namespace["default"].createElement(Fallback, null);
-        }
-        return children;
-    }
+/**
+ * Extracts the filename from a file key path
+ * @param fileKey - The full file key/path
+ * @returns The filename (last part after '/') or empty string if fileKey is null/undefined
+ */
+function getFileName(fileKey) {
+    if (!fileKey)
+        return '';
+    return fileKey.split('/').pop() ?? fileKey;
 }
 
 const { ActionHandlersProvider, useActionHandlers } = uiReactCore.createContextUtilities({
@@ -2204,938 +2008,1706 @@ const getActionHandlers = (configs) => {
             : { ...handlers, [key]: resolveHandler(config) }, defaultHandlers);
 };
 
-const defaultValue$5 = { data: {} };
-const { useControlsContext, ControlsContextProvider } = uiReactCore.createContextUtilities({
-    contextName: 'ControlsContext',
-    defaultValue: defaultValue$5,
-});
-
-const useActionCancel = () => {
-    const { data: { actionCancelLabel, isActionCancelDisabled }, onActionCancel, } = useControlsContext();
-    return {
-        onCancel: onActionCancel,
-        isDisabled: isActionCancelDisabled,
-        label: actionCancelLabel,
-    };
+const DEFAULT_ACTION_VIEW_DISPLAY_TEXT = {
+    actionCancelLabel: 'Cancel',
+    actionExitLabel: 'Exit',
+    actionDestinationLabel: 'Destination',
+    statusDisplayCanceledLabel: 'Canceled',
+    statusDisplayCompletedLabel: 'Completed',
+    statusDisplayFailedLabel: 'Failed',
+    statusDisplayInProgressLabel: 'In progress',
+    statusDisplayTotalLabel: 'Total',
+    statusDisplayQueuedLabel: 'Not started',
+    // empty by default
+    tableColumnCancelHeader: '',
+    tableColumnStatusHeader: 'Status',
+    tableColumnFolderHeader: 'Folder',
+    tableColumnNameHeader: 'Name',
+    tableColumnTypeHeader: 'Type',
+    tableColumnSizeHeader: 'Size',
+};
+const DEFAULT_LIST_VIEW_DISPLAY_TEXT = {
+    loadingIndicatorLabel: 'Loading',
+    searchSubmitLabel: 'Submit',
+    searchClearLabel: 'Clear search',
+    getDateDisplayValue: (date) => new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        year: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h12',
+    }).format(date),
 };
 
-function useResolvedComposable(DefaultComposable, name) {
-    const { composables } = useComposables();
-    const Composable = React__namespace["default"].useMemo(() => {
-        const ResolvedComposable = (props) => {
-            const Resolved = composables?.[name] ?? DefaultComposable;
-            return React__namespace["default"].createElement(Resolved, { ...props });
-        };
-        ResolvedComposable.displayName = name;
-        return ResolvedComposable;
-    }, [composables, DefaultComposable, name]);
-    return Composable;
-}
-
-const ActionCancelControl = () => {
-    const props = useActionCancel();
-    const Resolved = useResolvedComposable(ActionCancel, 'ActionCancel');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Create folder',
+    actionStartLabel: 'Create folder',
+    folderNameLabel: 'Folder name',
+    folderNamePlaceholder: 'Folder name cannot contain "/", nor end or start with "."',
+    getValidationMessage: () => 'Folder name cannot contain "/", nor end or start with "."',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { FAILED, OVERWRITE_PREVENTED } = counts ?? {};
+        if (OVERWRITE_PREVENTED) {
+            return {
+                content: 'A folder already exists with the provided name',
+                type: 'warning',
+            };
+        }
+        if (FAILED) {
+            return {
+                content: 'There was an issue creating the folder.',
+                type: 'error',
+            };
+        }
+        return { content: 'Folder created.', type: 'success' };
+    },
 };
 
-const getNavigationItems = ({ destinationParts, location, onNavigate, }) => {
-    const { bucket, permissions, prefix = '', type } = location;
-    const destinationSubpaths = [];
-    return destinationParts.map((part, index) => {
-        const isCurrent = index === destinationParts.length - 1;
-        if (index !== 0) {
-            destinationSubpaths.push(part);
+const DEFAULT_COPY_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Copy',
+    actionStartLabel: 'Copy',
+    actionDestinationLabel: 'Copy destination',
+    getListFoldersResultsMessage: ({ folders, query, message, hasError, hasExhaustedSearch, }) => {
+        if (!folders?.length) {
+            return {
+                content: query
+                    ? `No folders found matching "${query}"`
+                    : 'No subfolders found within selected folder.',
+                type: 'info',
+            };
+        }
+        if (message && !!query) {
+            return { content: 'Error loading folders.', type: 'error' };
+        }
+        if (hasError) {
+            return { content: 'Error loading folders.', type: 'error' };
+        }
+        if (hasExhaustedSearch) {
+            return {
+                content: 'Showing results for up to the first 10,000 items.',
+                type: 'info',
+            };
+        }
+    },
+    loadingIndicatorLabel: 'Loading',
+    overwriteWarningMessage: 'Copied files will overwrite existing files at selected destination.',
+    searchPlaceholder: 'Search for folders',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        if (COMPLETE === TOTAL) {
+            return {
+                content: 'All files copied.',
+                type: 'success',
+            };
+        }
+        if (FAILED === TOTAL) {
+            return { content: 'All files failed to copy.', type: 'error' };
         }
-        const destinationPath = `${destinationSubpaths.concat('').join('/')}`;
-        const destination = {
-            id: crypto.randomUUID(),
-            type,
-            permissions,
-            bucket,
-            prefix,
-        };
         return {
-            name: part,
-            ...(isCurrent && { isCurrent }),
-            onNavigate: () => {
-                onNavigate?.(destination, destinationPath);
-            },
+            content: `${COMPLETE} files copied, ${FAILED} files failed to copy.`,
+            type: 'error',
         };
-    });
+    },
+    searchSubmitLabel: 'Submit',
+    searchClearLabel: 'Clear search',
 };
 
-const getNavigationParts = ({ location, path, includeBucketInPrefix, }) => {
-    const { bucket, prefix = '', type } = location;
-    const trimmedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
-    const trimmedPath = path.endsWith('/') ? path.slice(0, -1) : path;
-    const firstPrefixPart = [];
-    if (type !== 'BUCKET') {
-        if (includeBucketInPrefix) {
-            firstPrefixPart.push(bucket);
-        }
-        if (trimmedPrefix) {
-            if (includeBucketInPrefix) {
-                firstPrefixPart.push('/');
-            }
-            firstPrefixPart.push(trimmedPrefix);
+const DEFAULT_DELETE_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Delete',
+    actionStartLabel: 'Delete',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        if (COMPLETE === TOTAL) {
+            return { content: 'All files deleted.', type: 'success' };
         }
-    }
-    const prefixParts = type === 'BUCKET' ? [bucket] : [firstPrefixPart.join('')];
-    if (type === 'BUCKET' && trimmedPrefix) {
-        prefixParts.push(trimmedPrefix);
-    }
-    const pathParts = trimmedPath ? trimmedPath.split('/') : [];
-    return prefixParts.concat(pathParts);
-};
-
-const useActionDestination = () => {
-    const { data, onSelectDestination } = useControlsContext();
-    const { actionDestinationLabel, isActionDestinationNavigable, destination } = data;
-    return React__namespace["default"].useMemo(() => {
-        if (!destination?.current) {
-            return { items: [] };
+        if (FAILED === TOTAL) {
+            return { content: 'All files failed to delete.', type: 'error' };
         }
-        const { current, path } = destination;
-        const destinationParts = getNavigationParts({
-            location: current,
-            path,
-        });
         return {
-            label: actionDestinationLabel,
-            items: getNavigationItems({
-                location: current,
-                destinationParts,
-                onNavigate: onSelectDestination,
-            }),
-            isNavigable: isActionDestinationNavigable,
+            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
+            type: 'error',
         };
-    }, [
-        actionDestinationLabel,
-        isActionDestinationNavigable,
-        destination,
-        onSelectDestination,
-    ]);
-};
-
-const ActionDestinationControl = () => {
-    const props = useActionDestination();
-    const Resolved = useResolvedComposable(ActionDestination$1, 'ActionDestination');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
-
-const useActionExit = () => {
-    const { data: { actionExitLabel: label, isActionExitDisabled: isDisabled }, onActionExit: onExit, } = useControlsContext();
-    return { label, isDisabled, onExit };
+    },
 };
 
-const ActionExitControl = () => {
-    const props = useActionExit();
-    const Resolved = useResolvedComposable(ActionExit, 'ActionExit');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const DEFAULT_ERROR_MESSAGE$1 = 'There was an error loading items.';
+const DEFAULT_FILE_PREVIEW_DISPLAY_TEXT = {
+    closeButtonLabel: 'Close',
+    filePreviewTitle: 'File Preview',
+    fileInformationTitle: 'File Information',
+    errorMessage: 'Something went wrong',
+    sizeLimitMessage: 'File preview not possible due to preview size limit',
+    unsupportedFileMessage: 'File preview not supported for this file type',
+    keyLabel: 'Key',
+    sizeLabel: 'Size',
+    versionIdLabel: 'Version Id',
+    lastModifiedLabel: 'Last Modified',
+    entityTagLabel: 'Entity tag',
+    typeLabel: 'Type',
+    unknownValue: 'Unknown',
+    errorDescription: 'We encountered an issue while loading the file preview.',
+    unsupportedFileDescription: 'This file format is not supported for preview. You can download the file to view it with an appropriate application.',
+    imageLoadErrorDescription: 'The image could not be loaded. This may be due to network issues, file corruption, or an unsupported image format.',
+    videoLoadErrorDescription: 'The video could not be played. This may be due to network issues, file corruption, or an unsupported video format or codec.',
+    textLoadErrorDescription: 'The text file could not be loaded. This may be due to network issues, file access permissions, or the file being too large to display.',
+    generalPreviewErrorDescription: 'An unexpected error occurred while loading the file preview. Please try again or download the file to view it with an appropriate application.',
+    fileSizeLimitDescription: 'This file is too large to preview in the browser. You can download the file to view it with an appropriate application.',
+    filePrefix: 'File: ',
+    retryButtonLabel: 'Retry',
+    downloadButtonLabel: 'Download',
+    getTextErrorMessage: (error) => `Error loading file: ${error}`,
+    emptyFileMessage: 'File is empty',
 };
-
-const useActionsList = () => {
-    const { data: { actions, isActionsListDisabled }, onActionSelect, } = useControlsContext();
-    return {
-        isDisabled: isActionsListDisabled,
-        items: actions ?? [],
-        onActionSelect,
-    };
+const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
+    getListItemsResultMessage: (data) => {
+        const { items, hasExhaustedSearch, hasError = false, message, isLoading, } = data ?? {};
+        if (isLoading) {
+            return undefined;
+        }
+        if (hasError) {
+            return {
+                type: 'error',
+                content: message ?? DEFAULT_ERROR_MESSAGE$1,
+            };
+        }
+        if (!items?.length && hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: `No results found in the first 10,000 items.`,
+            };
+        }
+        if (!items?.length) {
+            return {
+                type: 'info',
+                content: 'No files.',
+            };
+        }
+        if (hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: `Showing results for up to the first 10,000 items.`,
+            };
+        }
+        // TODO: add more cases as needed
+        return undefined;
+    },
+    searchSubfoldersToggleLabel: 'Include subfolders',
+    searchPlaceholder: 'Search current folder',
+    tableColumnLastModifiedHeader: 'Last modified',
+    tableColumnNameHeader: 'Name',
+    tableColumnSizeHeader: 'Size',
+    tableColumnTypeHeader: 'Type',
+    selectFileLabel: 'Select file',
+    selectAllFilesLabel: 'Select all files',
+    getActionListItemLabel: (key = '') => {
+        switch (key) {
+            case 'Copy':
+                return 'Copy';
+            case 'Delete':
+                return 'Delete';
+            case 'Create folder':
+                return 'Create folder';
+            case 'Upload':
+                return 'Upload';
+            case 'Download':
+                return 'Download';
+            default:
+                return key;
+        }
+    },
+    getTitle: (location) => {
+        const { current, key } = location;
+        const { bucket = '' } = current ?? {};
+        return key || bucket;
+    },
+    filePreview: DEFAULT_FILE_PREVIEW_DISPLAY_TEXT,
 };
 
-const ActionsListControl = () => {
-    const props = useActionsList();
-    const Resolved = useResolvedComposable(ActionsList$1, 'ActionsList');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
-
-const useActionStart = () => {
-    const { data: { actionStartLabel, isActionStartDisabled }, onActionStart, } = useControlsContext();
-    return {
-        label: actionStartLabel,
-        isDisabled: isActionStartDisabled,
-        onStart: onActionStart,
-    };
+const DEFAULT_ERROR_MESSAGE = 'There was an error loading locations.';
+const DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
+    title: 'Home',
+    searchPlaceholder: 'Filter folders and files',
+    getListLocationsResultMessage: (data) => {
+        const { isLoading, items, hasExhaustedSearch, hasError = false, message, } = data ?? {};
+        if (isLoading) {
+            return undefined;
+        }
+        if (hasError) {
+            return {
+                type: 'error',
+                content: message ?? DEFAULT_ERROR_MESSAGE,
+            };
+        }
+        if (items?.length === 0 && !hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: 'No folders or files.',
+            };
+        }
+        if (hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: `Showing results for up to the first 10,000 items.`,
+            };
+        }
+        // TODO: add more cases as needed
+        return undefined;
+    },
+    getPermissionName: (permissions) => {
+        let text = '';
+        if (permissions.includes('get') || permissions.includes('list')) {
+            text = 'Read';
+        }
+        if (permissions.includes('write') || permissions.includes('delete')) {
+            text = text ? 'Read/Write' : 'Write';
+        }
+        if (!text) {
+            text = permissions.join('/');
+        }
+        return text;
+    },
+    getDownloadLabel: (fileName) => `Download ${fileName}`,
+    tableColumnBucketHeader: 'Bucket',
+    tableColumnFolderHeader: 'Folder',
+    tableColumnPermissionsHeader: 'Permissions',
+    tableColumnActionsHeader: 'Actions',
 };
 
-const ActionStartControl = () => {
-    const props = useActionStart();
-    const Resolved = useResolvedComposable(ActionStart, 'ActionStart');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    actionStartLabel: 'Upload',
+    addFilesLabel: 'Add files',
+    addFolderLabel: 'Add folder',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, OVERWRITE_PREVENTED, CANCELED, TOTAL } = counts ?? {};
+        const hasPreventedOverwrite = !!OVERWRITE_PREVENTED;
+        const hasFailure = !!FAILED;
+        const hasSuccess = !!COMPLETE;
+        const hasCanceled = !!CANCELED;
+        const type = hasFailure
+            ? 'error'
+            : hasPreventedOverwrite || hasCanceled
+                ? 'warning'
+                : 'success';
+        const preventedOverwriteMessage = hasPreventedOverwrite
+            ? [
+                'Overwrite prevented for',
+                OVERWRITE_PREVENTED === TOTAL ? 'all' : String(OVERWRITE_PREVENTED),
+                OVERWRITE_PREVENTED > 1 || OVERWRITE_PREVENTED === TOTAL
+                    ? `files`
+                    : 'file',
+            ].join(' ')
+            : undefined;
+        const canceledMessage = hasCanceled
+            ? [
+                CANCELED === TOTAL ? 'All' : String(CANCELED),
+                CANCELED > 1 || CANCELED === TOTAL ? `uploads` : 'upload',
+                'canceled',
+            ].join(' ')
+            : undefined;
+        const failedMessage = hasFailure
+            ? [
+                FAILED === TOTAL ? 'All' : String(FAILED),
+                FAILED > 1 || FAILED === TOTAL ? `files` : 'file',
+                'failed to upload',
+            ].join(' ')
+            : undefined;
+        const completedMessage = hasSuccess
+            ? [
+                COMPLETE === TOTAL ? 'All' : String(COMPLETE),
+                COMPLETE > 1 || COMPLETE === TOTAL ? `files` : 'file',
+                'uploaded',
+            ].join(' ')
+            : undefined;
+        const messages = [
+            preventedOverwriteMessage,
+            failedMessage,
+            canceledMessage,
+            completedMessage,
+        ].filter(Boolean);
+        if (messages.length > 0) {
+            return {
+                content: messages.join(', ') + '.',
+                type,
+            };
+        }
+        return { content: 'All files uploaded.', type };
+    },
+    getFilesValidationMessage: (data) => {
+        if (!data?.invalidFiles) {
+            return undefined;
+        }
+        const invalidFileNames = data.invalidFiles
+            .map(({ file }) => file.name)
+            .join(', ');
+        if (invalidFileNames) {
+            return {
+                content: `Files larger than 160GB cannot be added to the upload queue: ${invalidFileNames}`,
+                type: 'warning',
+            };
+        }
+        return undefined;
+    },
+    overwriteToggleLabel: 'Overwrite existing files',
+    statusDisplayOverwritePreventedLabel: 'Overwrite prevented',
+    tableColumnProgressHeader: 'Progress',
+    title: 'Upload',
 };
 
-const useAddFiles = () => {
-    const { data: { addFilesLabel, isAddFilesDisabled }, onAddFiles, } = useControlsContext();
-    return {
-        isDisabled: isAddFilesDisabled,
-        label: addFilesLabel,
-        onAddFiles,
-    };
+const DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Download',
+    actionStartLabel: 'Download',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        if (COMPLETE === TOTAL) {
+            return { content: 'All files downloaded.', type: 'success' };
+        }
+        if (FAILED === TOTAL) {
+            return { content: 'All files failed to download.', type: 'error' };
+        }
+        return {
+            content: `${COMPLETE} files downloaded, ${FAILED} files failed to download.`,
+            type: 'error',
+        };
+    },
 };
 
-const AddFilesControl = () => {
-    const props = useAddFiles();
-    const Resolved = useResolvedComposable(AddFiles, 'AddFiles');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT = {
+    CopyView: DEFAULT_COPY_VIEW_DISPLAY_TEXT,
+    CreateFolderView: DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT,
+    DeleteView: DEFAULT_DELETE_VIEW_DISPLAY_TEXT,
+    DownloadView: DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT,
+    LocationDetailView: DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT,
+    LocationsView: DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT,
+    UploadView: DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT,
 };
 
-const useAddFolder = () => {
-    const { data: { addFolderLabel, isAddFolderDisabled }, onAddFolder, } = useControlsContext();
+const { DisplayTextContext, useDisplayText } = uiReactCore.createContextUtilities({
+    contextName: 'DisplayText',
+    errorMessage: '`useDisplayText` must be called inside `DisplayTextProvider`',
+});
+function resolveDisplayText(displayText) {
+    if (!displayText)
+        return DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT;
+    // override
+    const { CopyView, CreateFolderView, DeleteView, DownloadView, LocationDetailView, LocationsView, UploadView, } = displayText;
     return {
-        isDisabled: isAddFolderDisabled,
-        label: addFolderLabel,
-        onAddFolder,
+        CopyView: { ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CopyView, ...CopyView },
+        CreateFolderView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CreateFolderView,
+            ...CreateFolderView,
+        },
+        DeleteView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DeleteView,
+            ...DeleteView,
+        },
+        DownloadView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DownloadView,
+            ...DownloadView,
+        },
+        LocationDetailView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
+            ...LocationDetailView,
+            filePreview: {
+                ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView.filePreview,
+                ...(LocationDetailView?.filePreview ?? {}),
+            },
+        },
+        LocationsView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,
+            ...LocationsView,
+        },
+        UploadView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.UploadView,
+            ...UploadView,
+        },
     };
-};
-
-const AddFolderControl = () => {
-    const props = useAddFolder();
-    const Resolved = useResolvedComposable(AddFolder, 'AddFolder');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
-
-const useDataRefresh = () => {
-    const { data: { isDataRefreshDisabled }, onRefresh, } = useControlsContext();
-    return { isDisabled: isDataRefreshDisabled, onRefresh };
-};
+}
+function DisplayTextProvider({ children, displayText: _override, }) {
+    // do deep merge here of default and override here
+    const resolvedDisplayText = React__namespace["default"].useMemo(() => resolveDisplayText(_override), [_override]);
+    return (React__namespace["default"].createElement(DisplayTextContext.Provider, { value: resolvedDisplayText }, children));
+}
 
-const DataRefreshControl = () => {
-    const props = useDataRefresh();
-    const Resolved = useResolvedComposable(DataRefresh$1, 'DataRefresh');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const isCopyViewDisplayTextKey = (value) => !!DEFAULT_COPY_VIEW_DISPLAY_TEXT[value];
+const isDeleteViewDisplayTextKey = (value) => !!DEFAULT_DELETE_VIEW_DISPLAY_TEXT[value];
+const isDownloadViewDisplayTextKey = (value) => !!DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT[value];
 
-const compareContent$3 = ({ label: a }, { label: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+const DownloadButton = ({ fileKey }) => {
+    const [{ isProcessing: downloadPending }, handleDownload] = useAction('download');
+    const fileName = React.useMemo(() => getFileName(fileKey), [fileKey]);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { downloadButtonLabel }, } = displayText;
+    const handleDownloadClick = React.useCallback(() => {
+        handleDownload({
+            data: {
+                fileKey: fileName,
+                key: fileKey,
+                id: crypto.randomUUID(),
+            },
+        });
+    }, [fileName, fileKey, handleDownload]);
+    return (React__namespace["default"].createElement(ButtonElement, { ['aria-label']: `Download ${fileName} file`, className: `${STORAGE_BROWSER_BLOCK}__download-button`, onClick: handleDownloadClick, disabled: downloadPending, variant: "primary" },
+        downloadPending ? (React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__download-button_icon`, variant: "action-progress" })) : null,
+        downloadButtonLabel));
+};
+
+const DEFAULT_URL_OPTIONS = {
+    expiresIn: 7200,
+    validateObjectExistence: true,
+};
+const DEFAULT_FILE_SIZE_LIMIT = 200 * 1024 * 1024; // 200MB
+const DEFAULT_FILE_SIZE_LIMITS = {
+    image: 200 * 1024 * 1024,
+    video: 2 * 1024 * 1024 * 1024,
+    text: 10 * 1024 * 1024, // 10MB
+};
+const GENERIC_CONTENT_TYPES = new Set([
+    'application/octet-stream',
+    'binary/octet-stream',
+    'application/unknown',
+    'unknown/unknown',
+    'application/force-download',
+    'application/download',
+    'application/x-download',
+    'application/binary',
+]);
+const EXTENSION_MAPPINGS = {
+    // Images
+    jpg: 'image',
+    jpeg: 'image',
+    png: 'image',
+    gif: 'image',
+    webp: 'image',
+    svg: 'image',
+    bmp: 'image',
+    tiff: 'image',
+    tif: 'image',
+    ico: 'image',
+    heic: 'image',
+    heif: 'image',
+    avif: 'image',
+    // Videos
+    mp4: 'video',
+    avi: 'video',
+    mov: 'video',
+    wmv: 'video',
+    flv: 'video',
+    webm: 'video',
+    mkv: 'video',
+    m4v: 'video',
+    mpg: 'video',
+    mpeg: 'video',
+    '3gp': 'video',
+    ogv: 'video',
+    // Plain text files only
+    txt: 'text',
+    csv: 'text',
+    log: 'text',
+    json: 'text',
+    xml: 'text',
+    yaml: 'text',
+    yml: 'text',
+    ini: 'text',
+    conf: 'text',
+    cfg: 'text',
+};
+
+function isGenericContentType(contentType) {
+    if (!contentType || typeof contentType !== 'string') {
+        return true;
     }
-    return b === undefined ? -1 : a.localeCompare(b);
-};
-const compareButtonData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$3(a.content, b.content)
-    : compareContent$3(b.content, a.content);
-
-const compareContent$2 = ({ value: a }, { value: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+    const normalizedContentType = contentType.toLowerCase().trim();
+    return GENERIC_CONTENT_TYPES.has(normalizedContentType);
+}
+function isTextBasedApplicationType(contentType) {
+    if (contentType === 'application/json' ||
+        (contentType.startsWith('application/') && contentType.includes('+json'))) {
+        return true;
     }
-    return b === undefined ? -1 : a.getTime() - b.getTime();
-};
-const compareDateData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$2(a.content, b.content)
-    : compareContent$2(b.content, a.content);
-
-const compareContent$1 = ({ value: a }, { value: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+    if (contentType === 'application/xml' ||
+        (contentType.startsWith('application/') && contentType.includes('+xml'))) {
+        return true;
     }
-    return b === undefined ? -1 : a - b;
-};
-const compareNumberData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$1(a.content, b.content)
-    : compareContent$1(b.content, a.content);
-
-const compareContent = ({ text: a }, { text: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+    const textBasedTypes = [
+        'application/csv',
+        'application/yaml',
+        'application/toml',
+    ];
+    return textBasedTypes.includes(contentType);
+}
+function getFileTypeFromContentType(contentType) {
+    if (!contentType || typeof contentType !== 'string') {
+        return null;
     }
-    return b === undefined ? -1 : a.localeCompare(b);
-};
-const compareTextData = (a, b, direction) => direction === 'ascending'
-    ? compareContent(a.content, b.content)
-    : compareContent(b.content, a.content);
-
-const GROUP_ORDER = [
-    'checkbox',
-    'button',
-    'date',
-    'number',
-    'text',
-];
-const UNSORTABLE_GROUPS = ['checkbox'];
-const useDataTable = () => {
-    const { data } = useControlsContext();
-    const { isLoading, tableData } = data;
-    const defaultSortIndex = React__namespace["default"].useMemo(() => tableData?.headers?.findIndex(({ type }) => type === 'sort') ?? -1, [tableData]);
-    const [sortState, setSortState] = React__namespace["default"].useState({
-        index: defaultSortIndex,
-        direction: 'ascending',
-    });
-    const mappedHeaders = React__namespace["default"].useMemo(() => tableData?.headers.map((header, index) => {
-        const { type } = header;
-        switch (type) {
-            case 'sort': {
-                return {
-                    ...header,
-                    content: {
-                        ...header.content,
-                        onSort: () => {
-                            setSortState({
-                                index,
-                                direction: sortState.index === index
-                                    ? sortState.direction === 'ascending'
-                                        ? 'descending'
-                                        : 'ascending'
-                                    : 'ascending',
-                            });
-                        },
-                        sortDirection: sortState.index === index ? sortState.direction : undefined,
-                    },
-                };
-            }
-            case 'checkbox':
-            case 'text':
-            default: {
-                return header;
+    const normalizedContentType = contentType.toLowerCase().trim().split(';')[0];
+    if (normalizedContentType.startsWith('image/')) {
+        return 'image';
+    }
+    if (normalizedContentType.startsWith('video/')) {
+        return 'video';
+    }
+    if (normalizedContentType.startsWith('text/') ||
+        isTextBasedApplicationType(normalizedContentType)) {
+        return 'text';
+    }
+    return null;
+}
+function getFileExtension(key) {
+    if (!key || typeof key !== 'string') {
+        return null;
+    }
+    const lastDotIndex = key.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === key.length - 1) {
+        return null;
+    }
+    return key.slice(lastDotIndex + 1).toLowerCase();
+}
+function getFileTypeFromExtension(extension) {
+    if (!extension || typeof extension !== 'string') {
+        return null;
+    }
+    const normalizedExtension = extension.toLowerCase().trim();
+    return EXTENSION_MAPPINGS[normalizedExtension] || null;
+}
+function determineFileType(options) {
+    const { fileData, fileTypeResolver } = options;
+    const { contentType, key } = fileData ?? {};
+    if (typeof fileTypeResolver === 'function') {
+        try {
+            const customResult = fileTypeResolver(fileData);
+            if (customResult !== undefined && customResult !== null) {
+                return customResult;
             }
         }
-    }), [sortState, tableData]);
-    const sortedRows = React__namespace["default"].useMemo(() => {
-        // Early return if there is no table data
-        if (!tableData) {
-            return;
+        catch (error) {
+            //
         }
-        // Return rows as is if there are no sortable columns
-        if (sortState.index < 0) {
-            return tableData.rows;
+    }
+    if (!isGenericContentType(contentType)) {
+        const typeFromContentType = getFileTypeFromContentType(contentType);
+        if (typeFromContentType) {
+            return typeFromContentType;
         }
-        const { index, direction } = sortState;
-        const groupedRows = {
-            button: [],
-            checkbox: [],
-            date: [],
-            number: [],
-            text: [],
-        };
-        tableData.rows.forEach((row) => {
-            const { type } = row.content[index];
-            groupedRows[type].push(row);
-        });
-        const groupOrder = direction === 'ascending' ? GROUP_ORDER : [...GROUP_ORDER].reverse();
-        return groupOrder
-            .map((groupType) => {
-            if (UNSORTABLE_GROUPS.includes(groupType)) {
-                return groupedRows[groupType];
-            }
-            return groupedRows[groupType].sort((rowA, rowB) => {
-                switch (groupType) {
-                    case 'button': {
-                        return compareButtonData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'date': {
-                        return compareDateData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'number': {
-                        return compareNumberData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'text':
-                    default: {
-                        return compareTextData(rowA.content[index], rowB.content[index], direction);
-                    }
-                }
-            });
-        })
-            .flat();
-    }, [sortState, tableData]);
-    return {
-        headers: mappedHeaders ?? [],
-        isLoading,
-        rows: sortedRows ?? [],
-    };
-};
+    }
+    const extension = getFileExtension(key);
+    if (extension) {
+        return getFileTypeFromExtension(extension);
+    }
+    return null;
+}
 
-const DataTableControl = () => {
-    const props = useDataTable();
-    const Resolved = useResolvedComposable(DataTable, 'DataTable');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const LOCATION_DETAIL_VIEW_HEADERS = [
+    'checkbox',
+    'name',
+    'type',
+    'last-modified',
+    'size',
+    'download',
+];
+const GENERIC_FILE_ICON = 'file';
+const EXTENSION_THUMBNAIL_MAPPINGS = {
+    // Images
+    jpg: 'file-image',
+    jpeg: 'file-image',
+    png: 'file-image',
+    gif: 'file-image',
+    webp: 'file-image',
+    svg: 'file-image',
+    bmp: 'file-image',
+    tiff: 'file-image',
+    tif: 'file-image',
+    ico: 'file-image',
+    heic: 'file-image',
+    heif: 'file-image',
+    avif: 'file-image',
+    // Videos
+    mp4: 'file-video',
+    avi: 'file-video',
+    mov: 'file-video',
+    wmv: 'file-video',
+    flv: 'file-video',
+    webm: 'file-video',
+    mkv: 'file-video',
+    m4v: 'file-video',
+    mpg: 'file-video',
+    mpeg: 'file-video',
+    '3gp': 'file-video',
+    ogv: 'file-video',
+    // Plain text files only
+    txt: 'file-text',
+    log: 'file-text',
+    json: 'file-text',
+    xml: 'file-text',
+    yaml: 'file-text',
+    yml: 'file-text',
+    ini: 'file-text',
+    conf: 'file-text',
+    cfg: 'file-text',
+    // Audio
+    mp3: 'file-audio',
+    wav: 'file-audio',
+    flac: 'file-audio',
+    aac: 'file-audio',
+    ogg: 'file-audio',
+    wma: 'file-audio',
+    m4a: 'file-audio',
+    // Documents
+    pdf: 'file-pdf',
+    // Excel
+    xls: 'file-excel',
+    xlsx: 'file-excel',
+    csv: 'file-excel',
+    // Word
+    doc: 'file-word',
+    docx: 'file-word',
+    rtf: 'file-word',
+    // PowerPoint
+    ppt: 'file-powerpoint',
+    pptx: 'file-powerpoint',
+    // Archives
+    zip: 'file-archive',
+    rar: 'file-archive',
+    '7z': 'file-archive',
+    tar: 'file-archive',
+    gz: 'file-archive',
+    bz2: 'file-archive',
+};
+
+function getFileThumbnail(fileKey) {
+    const extension = getFileExtension(fileKey);
+    if (!fileKey || !extension)
+        return GENERIC_FILE_ICON;
+    return EXTENSION_THUMBNAIL_MAPPINGS[extension] || GENERIC_FILE_ICON;
+}
 
-/**
- * This hook, not to be confused with the useDropZone vended from @aws-amplify/ui-react-core, is only intended for use
- * with its corresponding DropZone control.
- */
-const useDropZone = () => {
-    const { onDropFiles } = useControlsContext();
-    return { onDropFiles };
-};
+function PreviewFallback({ fileKey, message, description, isError = false, onRetry, showRetry = false, }) {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { errorDescription, unsupportedFileDescription, filePrefix, retryButtonLabel, }, } = displayText;
+    const fileName = getFileName(fileKey);
+    const fallbackClass = isError
+        ? `${STORAGE_BROWSER_BLOCK}__preview-fallback--error`
+        : `${STORAGE_BROWSER_BLOCK}__preview-fallback--default`;
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(`${STORAGE_BROWSER_BLOCK}__preview-fallback`, fallbackClass) },
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-icon` },
+            React__namespace["default"].createElement(IconElement, { className: "amplify-icon", variant: isError ? 'error' : getFileThumbnail(fileKey) })),
+        React__namespace["default"].createElement(ViewElement, null,
+            React__namespace["default"].createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-title` }, message),
+            React__namespace["default"].createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-description` }, description ??
+                (isError ? errorDescription : unsupportedFileDescription)),
+            React__namespace["default"].createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-filename` },
+                filePrefix,
+                fileName)),
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-actions` },
+            showRetry && onRetry && (React__namespace["default"].createElement(ButtonElement, { variant: "primary", onClick: onRetry, ['aria-label']: `Retry loading ${fileName} file` }, retryButtonLabel)),
+            React__namespace["default"].createElement(DownloadButton, { fileKey: fileKey }))));
+}
 
-const DropZoneControl = ({ children, }) => {
-    const props = useDropZone();
-    const Resolved = useResolvedComposable(DropZone, 'DropZone');
-    return React__namespace["default"].createElement(Resolved, { ...props }, children);
-};
+function ImagePreview({ url, fileKey, }) {
+    const [error, setError] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [imageKey, setImageKey] = React.useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { imageLoadErrorDescription }, } = displayText;
+    const handleError = React.useCallback(() => {
+        setError('Failed to load image');
+        setIsLoading(false);
+    }, []);
+    const handleLoad = React.useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+    }, []);
+    const handleRetry = React.useCallback(() => {
+        setError(null);
+        setIsLoading(true);
+        setImageKey((prev) => prev + 1);
+    }, []);
+    if (error) {
+        return (React__namespace["default"].createElement(PreviewFallback, { fileKey: fileKey, message: error, description: imageLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__image-container` },
+        isLoading && React__namespace["default"].createElement(PreviewPlaceholder, null),
+        React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__image-preview`, style: { display: isLoading ? 'none' : 'flex' } },
+            React__namespace["default"].createElement("img", { key: imageKey, className: ui.classNames(ui.ComponentClassName.StorageImage), src: url, alt: `Image preview for ${getFileName(fileKey)}`, onError: handleError, onLoad: handleLoad }))));
+}
 
-const useFolderNameField = () => {
-    const { data, onValidateFolderName, onFolderNameChange } = useControlsContext();
-    const { folderNameId, folderNameLabel, folderNamePlaceholder, folderNameValidationMessage, isFolderNameDisabled, } = data;
-    return {
-        id: folderNameId,
-        isDisabled: isFolderNameDisabled,
-        label: folderNameLabel,
-        onChange: onFolderNameChange,
-        onValidate: onValidateFolderName,
-        placeholder: folderNamePlaceholder,
-        validationMessage: folderNameValidationMessage,
-    };
-};
+const { FilePreviewContext, useFilePreview: useFilePreviewContext } = uiReactCore.createContextUtilities({
+    contextName: 'FilePreview',
+    defaultValue: {},
+});
+function FilePreviewProvider({ children, filePreview, }) {
+    return (React__namespace["default"].createElement(FilePreviewContext.Provider, { value: filePreview }, children));
+}
 
-const FolderNameFieldControl = () => {
-    const props = useFolderNameField();
-    const Resolved = useResolvedComposable(FolderNameField$1, 'FolderNameField');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+function VideoPreview({ url, fileKey, }) {
+    const [error, setError] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [videoKey, setVideoKey] = React.useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { videoLoadErrorDescription }, } = displayText;
+    const handleError = React.useCallback((event) => {
+        const videoElement = event.currentTarget;
+        const errorCode = videoElement.error?.code;
+        let errorMessage = 'Failed to load video';
+        switch (errorCode) {
+            case MediaError.MEDIA_ERR_ABORTED:
+                errorMessage = 'Video loading was aborted';
+                break;
+            case MediaError.MEDIA_ERR_NETWORK:
+                errorMessage = 'Network error occurred while loading video';
+                break;
+            case MediaError.MEDIA_ERR_DECODE:
+                errorMessage = 'Video format is not supported or corrupted';
+                break;
+            case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                errorMessage = 'Video format is not supported';
+                break;
+            default:
+                errorMessage = 'An unknown error occurred while loading video';
+        }
+        setError(errorMessage);
+        setIsLoading(false);
+    }, []);
+    const handleLoadStart = React.useCallback(() => {
+        setIsLoading(true);
+        setError(null);
+    }, []);
+    const handleLoadedData = React.useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+    }, []);
+    const handleRetry = React.useCallback(() => {
+        setError(null);
+        setIsLoading(true);
+        setVideoKey((prev) => prev + 1);
+    }, []);
+    if (error) {
+        return (React__namespace["default"].createElement(PreviewFallback, { fileKey: fileKey, message: error, description: videoLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__video-container` },
+        isLoading && React__namespace["default"].createElement(PreviewPlaceholder, null),
+        React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__video-preview`, style: { display: isLoading ? 'none' : 'flex' } },
+            React__namespace["default"].createElement("video", { key: videoKey, controls: true, preload: "metadata", onError: handleError, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, "aria-label": `Video preview for ${getFileName(fileKey)}` },
+                React__namespace["default"].createElement("source", { src: url }),
+                "Your browser does not support the video tag."))));
+}
 
-const useLoadingIndicator = () => {
-    const { data: { isLoading, loadingIndicatorLabel: label }, } = useControlsContext();
-    return { isLoading, label };
-};
+function TextPreview({ url, fileKey, }) {
+    const [content, setContent] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [retryCount, setRetryCount] = React.useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { emptyFileMessage, textLoadErrorDescription }, } = displayText;
+    const handleRetry = React.useCallback(() => {
+        setRetryCount((prev) => prev + 1);
+    }, []);
+    React.useEffect(() => {
+        if (!url)
+            return;
+        const controller = new AbortController();
+        async function loadTextFileContent() {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const response = await fetch(url, {
+                    signal: controller.signal,
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file: ${response.statusText}`);
+                }
+                const textContent = await response.text();
+                setContent(textContent);
+            }
+            catch (err) {
+                if (err instanceof Error && err.name !== 'AbortError') {
+                    const errorMessage = err.message || 'Failed to load file';
+                    setError(errorMessage);
+                }
+            }
+            finally {
+                if (!controller.signal.aborted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+        loadTextFileContent();
+        return () => {
+            controller.abort();
+        };
+    }, [url, fileKey, retryCount]);
+    if (isLoading) {
+        return React__namespace["default"].createElement(PreviewPlaceholder, null);
+    }
+    if (error) {
+        return (React__namespace["default"].createElement(PreviewFallback, { fileKey: fileKey, message: error, description: textLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__text-container` },
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__text-preview` }, content || emptyFileMessage)));
+}
 
-const LoadingIndicatorControl = () => {
-    const props = useLoadingIndicator();
-    const Resolved = useResolvedComposable(LoadingIndicator$1, 'LoadingIndicator');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const NONE = 'None';
+function FileMetadata({ fileData, }) {
+    const { key, lastModified, versionId = NONE, size, eTag } = fileData;
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { keyLabel, sizeLabel, versionIdLabel, lastModifiedLabel, entityTagLabel, typeLabel, fileInformationTitle, unknownValue, }, } = displayText;
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-section` },
+        React__namespace["default"].createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-title` }, fileInformationTitle),
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata` }, [
+            { label: keyLabel, value: key },
+            {
+                label: sizeLabel,
+                value: ui.humanFileSize(size, true),
+            },
+            { label: versionIdLabel, value: versionId },
+            {
+                label: lastModifiedLabel,
+                value: lastModified?.toLocaleString() || unknownValue,
+            },
+            { label: entityTagLabel, value: eTag },
+            {
+                label: typeLabel,
+                value: getFileExtension(key) ?? NONE,
+            },
+        ].map(({ label, value }) => (React__namespace["default"].createElement(ViewElement, { key: label, className: `${STORAGE_BROWSER_BLOCK}__file-metadata-item` },
+            React__namespace["default"].createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata-label` },
+                label,
+                ":"),
+            React__namespace["default"].createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata-value` }, value)))))));
+}
 
-const useMessage = () => {
-    const { data: { message = {} }, } = useControlsContext();
-    return message;
-};
+function FilePreviewLayout({ fileData, children, }) {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { filePreviewTitle }, } = displayText;
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-section` },
+            React__namespace["default"].createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-title` }, filePreviewTitle),
+            React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__file-preview-content` }, children)),
+        React__namespace["default"].createElement(FileMetadata, { fileData: fileData })));
+}
 
-const MessageControl = () => {
-    const props = useMessage();
-    const Resolved = useResolvedComposable(Message, 'Message');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const rendererMap = {
+    image: ImagePreview,
+    video: VideoPreview,
+    text: TextPreview,
 };
-
-const useNavigation = () => {
-    const { data, onNavigate, onNavigateHome } = useControlsContext();
-    const { location } = data;
-    return React__namespace["default"].useMemo(() => {
-        if (!location?.current) {
-            return { items: [] };
+const DefaultRenderer = ({ url, type, fileKey }) => {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { unsupportedFileDescription, unsupportedFileMessage }, } = displayText;
+    if (type && type in rendererMap) {
+        const PreviewComponent = rendererMap[type];
+        return React__namespace["default"].createElement(PreviewComponent, { fileKey: fileKey, url: url });
+    }
+    return (React__namespace["default"].createElement(PreviewFallback, { fileKey: fileKey, message: unsupportedFileMessage, description: unsupportedFileDescription }));
+};
+const ResolvedRenderer = ({ fileKey, url, fileData }) => {
+    const { rendererResolver } = (useFilePreviewContext() ?? {}) || {};
+    if (rendererResolver && fileData.fileType) {
+        const CustomRenderer = rendererResolver(fileData.fileType);
+        if (CustomRenderer) {
+            return React__namespace["default"].createElement(CustomRenderer, { url: url, fileData: fileData });
         }
-        const { current, path } = location;
-        const destinationParts = getNavigationParts({
-            location: current,
-            path,
-            includeBucketInPrefix: true,
-        });
-        const homeItem = [
-            { name: 'Home', onNavigate: onNavigateHome },
-        ];
-        return {
-            items: homeItem.concat(getNavigationItems({ location: current, destinationParts, onNavigate })),
-        };
-    }, [location, onNavigate, onNavigateHome]);
-};
-
-const NavigationControl = () => {
-    const props = useNavigation();
-    const Resolved = useResolvedComposable(Navigation$1, 'Navigation');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+    }
+    return (React__namespace["default"].createElement(DefaultRenderer, { fileKey: fileKey, url: url, type: fileData.fileType }));
 };
+const FilePreviewContent = ({ filePreview, activeFile, onRetryFilePreview, onSelectActiveFile, activeFileHasNext, activeFileHasPrev, }) => {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { errorMessage, sizeLimitMessage, generalPreviewErrorDescription, fileSizeLimitDescription, }, } = displayText;
+    const { key } = activeFile;
+    if (filePreview.isLoading) {
+        return (React__namespace["default"].createElement(FilePreviewLayout, { fileData: activeFile },
+            React__namespace["default"].createElement(PreviewPlaceholder, null)));
+    }
+    if (!filePreview.ok) {
+        if (filePreview.error === 'LIMIT_EXCEEDED') {
+            return (React__namespace["default"].createElement(FilePreviewLayout, { fileData: activeFile },
+                React__namespace["default"].createElement(PreviewFallback, { fileKey: key, message: sizeLimitMessage, description: fileSizeLimitDescription })));
+        }
+        return (React__namespace["default"].createElement(FilePreviewLayout, { fileData: activeFile },
+            React__namespace["default"].createElement(PreviewFallback, { fileKey: key, message: errorMessage, description: generalPreviewErrorDescription, isError: true, onRetry: onRetryFilePreview, showRetry: true })));
+    }
+    return (React__namespace["default"].createElement(FilePreviewLayout, { fileData: filePreview.fileData },
+        React__namespace["default"].createElement(ResolvedRenderer, { fileKey: key, url: filePreview.url, fileData: filePreview.fileData }),
+        React__namespace["default"].createElement("div", { style: { display: 'flex', flexFlow: 'row nowrap' } },
+            React__namespace["default"].createElement(ButtonElement, { disabled: !activeFileHasPrev, onClick: () => onSelectActiveFile('prev'), variant: 'paginate-previous' },
+                React__namespace["default"].createElement(IconElement, { variant: 'paginate-previous' })),
+            React__namespace["default"].createElement(DownloadButton, { fileKey: key }),
+            React__namespace["default"].createElement(ButtonElement, { disabled: !activeFileHasNext, onClick: () => onSelectActiveFile('next'), variant: 'paginate-next' },
+                React__namespace["default"].createElement(IconElement, { variant: 'paginate-next' })))));
+};
+function FilePreview(props) {
+    const { filePreview, activeFileHasNext, activeFileHasPrev, onRetryFilePreview = () => undefined, activeFile, onSelectActiveFile = () => undefined, } = props;
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { closeButtonLabel }, } = displayText;
+    if (!activeFile || !filePreview) {
+        return null;
+    }
+    if (!filePreview.enabled) {
+        return null;
+    }
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview` },
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-header` },
+            React__namespace["default"].createElement(ButtonElement, { variant: "exit", onClick: () => onSelectActiveFile(undefined) },
+                React__namespace["default"].createElement(IconElement, { variant: "dismiss" }),
+                closeButtonLabel)),
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-container` },
+            React__namespace["default"].createElement(FilePreviewContent, { filePreview: filePreview, activeFile: activeFile, activeFileHasNext: activeFileHasNext, activeFileHasPrev: activeFileHasPrev, onRetryFilePreview: onRetryFilePreview, onSelectActiveFile: onSelectActiveFile }))));
+}
 
-const useOverwriteToggle = () => {
-    const { data: { isOverwritingEnabled, isOverwriteToggleDisabled, overwriteToggleLabel, }, onToggleOverwrite, } = useControlsContext();
-    return {
-        isDisabled: isOverwriteToggleDisabled,
-        isOverwritingEnabled,
-        label: overwriteToggleLabel,
-        onToggle: onToggleOverwrite,
-    };
-};
+const OVERWRITE_TOGGLE_ID = 'overwrite-toggle';
+const OverwriteToggle$1 = ({ isOverwritingEnabled, isDisabled, label, onToggle, }) => (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__overwrite-toggle` },
+    React__namespace["default"].createElement(InputElement, { checked: isOverwritingEnabled, disabled: isDisabled, id: OVERWRITE_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
+    React__namespace["default"].createElement(LabelElement, { htmlFor: OVERWRITE_TOGGLE_ID }, label)));
 
-const OverwriteToggleControl = () => {
-    const props = useOverwriteToggle();
-    const Resolved = useResolvedComposable(OverwriteToggle$1, 'OverwriteToggle');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const Pagination$1 = ({ page, hasNextPage, onPaginate, highestPageVisited, }) => {
+    if (!page)
+        return null;
+    return (React__namespace["default"].createElement(NavElement, { "aria-label": 'Pagination', className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination` },
+        React__namespace["default"].createElement(OrderedListElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list` },
+            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__namespace["default"].createElement(PaginationButton, { isDisabled: page <= 1, onClick: () => {
+                        if (onPaginate)
+                            onPaginate(page - 1);
+                    }, type: "previous" })),
+            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__namespace["default"].createElement(SpanElement, { "aria-label": `Page ${page}`, "aria-current": "page", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-current-page` }, page)),
+            React__namespace["default"].createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__namespace["default"].createElement(PaginationButton, { isDisabled: !highestPageVisited ||
+                        (page >= highestPageVisited && !hasNextPage), onClick: () => {
+                        if (onPaginate)
+                            onPaginate(page + 1);
+                    }, type: "next" })))));
 };
 
-const usePagination = () => {
-    const { data, onPaginate } = useControlsContext();
-    const { paginationData } = data;
-    return { ...paginationData, onPaginate };
+const SearchField$1 = ({ id, label, clearLabel, submitLabel, onSearch, onClear, placeholder, query = '', onQueryChange, }) => {
+    // FIXME: focus not returning to input field after clear
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(Field, { id: id, label: label, icon: React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field-icon`, variant: "search" }), className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field`, variant: "search", onChange: (e) => {
+                onQueryChange?.(e.target.value);
+            }, placeholder: placeholder, onKeyUp: (event) => {
+                if (event.key === 'Enter') {
+                    onSearch?.();
+                }
+            }, value: query }, query ? (React__namespace["default"].createElement(ButtonElement, { "aria-label": clearLabel, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field-clear`, onClick: onClear, variant: "refresh" },
+            React__namespace["default"].createElement(IconElement, { variant: "dismiss" }))) : null),
+        React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-submit`, onClick: onSearch }, submitLabel)));
 };
 
-const PaginationControl = () => {
-    const props = usePagination();
-    const Resolved = useResolvedComposable(Pagination$1, 'Pagination');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const SEARCH_SUBFOLDERS_TOGGLE_ID = 'search-subfolders-toggle';
+const SearchSubfoldersToggle$1 = ({ isSearchingSubfolders, label, onToggle, }) => (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search-subfolders-toggle` },
+    React__namespace["default"].createElement(InputElement, { checked: isSearchingSubfolders, id: SEARCH_SUBFOLDERS_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
+    React__namespace["default"].createElement(LabelElement, { htmlFor: SEARCH_SUBFOLDERS_TOGGLE_ID }, label)));
 
-const useSearchField = () => {
-    const { data, onSearch, onSearchClear, onSearchQueryChange } = useControlsContext();
-    const { searchPlaceholder, searchClearLabel, searchQuery, searchSubmitLabel, } = data;
-    return {
-        clearLabel: searchClearLabel,
-        placeholder: searchPlaceholder,
-        query: searchQuery,
-        submitLabel: searchSubmitLabel,
-        onClear: onSearchClear,
-        onQueryChange: onSearchQueryChange,
-        onSearch,
-    };
+const StatusDisplay$1 = ({ statuses, total, }) => {
+    if (!statuses?.length) {
+        return null;
+    }
+    const descriptions = statuses.map(({ name, count }) => ({
+        term: name,
+        details: `${count}/${total}`,
+    }));
+    return (React__namespace["default"].createElement(DescriptionList, { className: `${STORAGE_BROWSER_BLOCK}__status-display`, descriptions: descriptions }));
 };
 
-const SearchFieldControl = () => {
-    const props = useSearchField();
-    const Resolved = useResolvedComposable(SearchField$1, 'SearchField');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const Title$1 = ({ title }) => (React__namespace["default"].createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__title` }, title));
 
-const useSearchSubfoldersToggle = () => {
-    const { data: { isSearchingSubfolders, searchSubfoldersToggleLabel }, onToggleSearchSubfolders, } = useControlsContext();
-    return {
-        isSearchingSubfolders,
-        label: searchSubfoldersToggleLabel,
-        onToggle: onToggleSearchSubfolders,
-    };
+const DEFAULT_COMPOSABLES = {
+    ActionCancel,
+    ActionDestination: ActionDestination$1,
+    ActionExit,
+    ActionStart,
+    ActionsList: ActionsList$1,
+    AddFiles,
+    AddFolder,
+    DataRefresh: DataRefresh$1,
+    DataTable,
+    DropZone,
+    FolderNameField: FolderNameField$1,
+    LoadingIndicator: LoadingIndicator$1,
+    Message,
+    Navigation: Navigation$1,
+    OverwriteToggle: OverwriteToggle$1,
+    Pagination: Pagination$1,
+    SearchSubfoldersToggle: SearchSubfoldersToggle$1,
+    SearchField: SearchField$1,
+    StatusDisplay: StatusDisplay$1,
+    Title: Title$1,
+    FilePreview,
 };
 
-const SearchSubfoldersToggleControl = () => {
-    const props = useSearchSubfoldersToggle();
-    const Resolved = useResolvedComposable(SearchSubfoldersToggle$1, 'SearchSubfoldersToggle');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+function ComponentsProvider(props) {
+    const { children, composables } = props;
+    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elementsDefault },
+        React__namespace["default"].createElement(ComposablesProvider, { composables: composables }, children)));
+}
 
-const useStatusDisplay = () => {
-    const { data } = useControlsContext();
-    const { statusCounts, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = data;
-    if (!statusCounts?.TOTAL) {
-        return { statuses: [], total: 0 };
-    }
-    const statuses = [
-        { name: statusDisplayCompletedLabel ?? '', count: statusCounts.COMPLETE },
-        { name: statusDisplayFailedLabel ?? '', count: statusCounts.FAILED },
-        { name: statusDisplayCanceledLabel ?? '', count: statusCounts.CANCELED },
-        { name: statusDisplayQueuedLabel ?? '', count: statusCounts.QUEUED },
-    ];
-    return { statuses, total: statusCounts.TOTAL };
+const OverwriteToggle = ({ isDisabled, isOverwritingEnabled, label = '', onToggle, }) => {
+    return (React__namespace.createElement(uiReact.CheckboxField, { name: label, label: label, labelPosition: "end", isDisabled: isDisabled, checked: isOverwritingEnabled, onChange: () => {
+            onToggle?.();
+        } }));
 };
-
-const StatusDisplayControl = () => {
-    const props = useStatusDisplay();
-    const Resolved = useResolvedComposable(StatusDisplay$1, 'StatusDisplay');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const SearchSubfoldersToggle = ({ isSearchingSubfolders, label = '', onToggle }) => {
+    return (React__namespace.createElement(uiReact.CheckboxField, { name: label, label: label, labelPosition: "end", checked: isSearchingSubfolders, onChange: () => {
+            onToggle?.();
+        } }));
 };
-
-const useTitle = () => {
-    const { data } = useControlsContext();
-    return {
-        title: data?.title,
-    };
+const Pagination = ({ page = 1, onPaginate, hasNextPage, highestPageVisited, }) => {
+    return (React__namespace.createElement(uiReact.Pagination, { currentPage: page, totalPages: highestPageVisited ?? 1, hasMorePages: hasNextPage, siblingCount: 1, onChange: (index) => {
+            onPaginate?.(index ?? 0);
+        }, onNext: () => {
+            onPaginate?.(page + 1);
+        }, onPrevious: () => {
+            onPaginate?.(page - 1);
+        } }));
 };
-
-const TitleControl = () => {
-    const props = useTitle();
-    const Resolved = useResolvedComposable(Title$1, 'Title');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const SearchField = ({ onQueryChange, onSearch, onClear, placeholder, label, query, }) => {
+    return (React__namespace.createElement(uiReact.SearchField, { label: label, size: "small", clearButtonLabel: "Clear search", placeholder: placeholder, value: query, onChange: (e) => {
+            onQueryChange?.(e.target.value);
+        }, onSubmit: () => {
+            onSearch?.();
+        }, onClear: () => {
+            onClear?.();
+        } }));
 };
-
-const DEFAULT_ACTION_VIEW_DISPLAY_TEXT = {
-    actionCancelLabel: 'Cancel',
-    actionExitLabel: 'Exit',
-    actionDestinationLabel: 'Destination',
-    statusDisplayCanceledLabel: 'Canceled',
-    statusDisplayCompletedLabel: 'Completed',
-    statusDisplayFailedLabel: 'Failed',
-    statusDisplayInProgressLabel: 'In progress',
-    statusDisplayTotalLabel: 'Total',
-    statusDisplayQueuedLabel: 'Not started',
-    // empty by default
-    tableColumnCancelHeader: '',
-    tableColumnStatusHeader: 'Status',
-    tableColumnFolderHeader: 'Folder',
-    tableColumnNameHeader: 'Name',
-    tableColumnTypeHeader: 'Type',
-    tableColumnSizeHeader: 'Size',
+const Navigation = ({ items }) => {
+    return (React__namespace.createElement(uiReact.Breadcrumbs.Container, null, items.map((item, i) => {
+        return (React__namespace.createElement(uiReact.Breadcrumbs.Item, { key: i },
+            React__namespace.createElement(uiReact.Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name),
+            item.isCurrent ? null : React__namespace.createElement(uiReact.Breadcrumbs.Separator, null)));
+    })));
 };
-const DEFAULT_LIST_VIEW_DISPLAY_TEXT = {
-    loadingIndicatorLabel: 'Loading',
-    searchSubmitLabel: 'Submit',
-    searchClearLabel: 'Clear search',
-    getDateDisplayValue: (date) => new Intl.DateTimeFormat('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        year: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h12',
-    }).format(date),
+const LoadingIndicator = ({ isLoading, }) => {
+    if (isLoading) {
+        return (React__namespace.createElement(uiReact.Loader, { className: "amplify-storage-browser__loader", variation: "linear", size: "small" }));
+    }
 };
-
-const DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Create folder',
-    actionStartLabel: 'Create folder',
-    folderNameLabel: 'Folder name',
-    folderNamePlaceholder: 'Folder name cannot contain "/", nor end or start with "."',
-    getValidationMessage: () => 'Folder name cannot contain "/", nor end or start with "."',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { FAILED, OVERWRITE_PREVENTED } = counts ?? {};
-        if (OVERWRITE_PREVENTED) {
-            return {
-                content: 'A folder already exists with the provided name',
-                type: 'warning',
-            };
-        }
-        if (FAILED) {
-            return {
-                content: 'There was an issue creating the folder.',
-                type: 'error',
-            };
-        }
-        return { content: 'Folder created.', type: 'success' };
-    },
+const FolderNameField = ({ onChange, label, placeholder, validationMessage, onValidate, }) => {
+    const handleValidate = ({ target: { value }, }) => {
+        onValidate?.(value);
+    };
+    return (React__namespace.createElement(uiReact.TextField, { label: label, placeholder: placeholder, errorMessage: validationMessage, hasError: !!validationMessage, onBlur: handleValidate, onChange: (event) => {
+            const { value } = event.target;
+            handleValidate?.(event);
+            onChange?.(value);
+        } }));
+};
+const DataRefresh = ({ onRefresh, }) => {
+    return (React__namespace.createElement(uiReact.Button, { onClick: () => {
+            onRefresh?.();
+        }, "aria-label": "Refresh data" },
+        React__namespace.createElement(IconElement, { className: "amplify-icon", variant: "refresh" })));
+};
+const ActionsList = ({ items, onActionSelect, isDisabled, }) => {
+    return (React__namespace.createElement(uiReact.Menu, { isDisabled: isDisabled, trigger: React__namespace.createElement(uiReact.Button, { ariaLabel: "Menu Toggle" },
+            React__namespace.createElement(IconElement, { className: "amplify-icon", variant: "menu" })) }, items
+        .filter(({ isHidden }) => !isHidden)
+        .map(({ actionType, icon, label, isDisabled }, i) => {
+        return (React__namespace.createElement(uiReact.MenuItem, { key: i, size: "small", gap: "xs", isDisabled: isDisabled, onClick: () => {
+                onActionSelect?.(actionType);
+            } },
+            icon && React__namespace.createElement(IconElement, { variant: icon }),
+            label));
+    })));
+};
+const StatusDisplay = ({ statuses, total, }) => {
+    if (!statuses?.length) {
+        return null;
+    }
+    return (React__namespace.createElement(uiReact.View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__status-display` }, statuses.map(({ name, count }, i) => (React__namespace.createElement(uiReact.View, { as: "div", className: `${STORAGE_BROWSER_BLOCK}__status`, key: i },
+        React__namespace.createElement(uiReact.View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__status-label` }, name),
+        React__namespace.createElement(uiReact.View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__status-value` }, `${count}/${total}`))))));
+};
+const ActionDestination = ({ isNavigable, items, label, }) => {
+    if (!items.length) {
+        return null;
+    }
+    return (React__namespace.createElement(uiReact.View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__destination` },
+        React__namespace.createElement(uiReact.View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__destination-label` }, label),
+        React__namespace.createElement(uiReact.View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__destination-value` },
+            React__namespace.createElement(uiReact.Breadcrumbs.Container, null, items.map((item, i) => {
+                return (React__namespace.createElement(uiReact.Breadcrumbs.Item, { key: i },
+                    isNavigable ? (React__namespace.createElement(uiReact.Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name)) : (item.name),
+                    item.isCurrent ? null : React__namespace.createElement(uiReact.Breadcrumbs.Separator, null)));
+            })))));
+};
+const Title = ({ title }) => {
+    return (React__namespace.createElement(uiReact.Heading, { className: `${STORAGE_BROWSER_BLOCK}__title`, level: 2 }, title));
+};
+const componentsDefault = {
+    ActionDestination,
+    ActionsList,
+    DataRefresh,
+    LoadingIndicator,
+    Pagination,
+    Navigation,
+    OverwriteToggle,
+    SearchField,
+    SearchSubfoldersToggle,
+    StatusDisplay,
+    FolderNameField,
+    Title,
 };
 
-const DEFAULT_COPY_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Copy',
-    actionStartLabel: 'Copy',
-    actionDestinationLabel: 'Copy destination',
-    getListFoldersResultsMessage: ({ folders, query, message, hasError, hasExhaustedSearch, }) => {
-        if (!folders?.length) {
-            return {
-                content: query
-                    ? `No folders found matching "${query}"`
-                    : 'No subfolders found within selected folder.',
-                type: 'info',
-            };
-        }
-        if (message && !!query) {
-            return { content: 'Error loading folders.', type: 'error' };
-        }
+const Fallback = () => (React__namespace["default"].createElement("div", { className: STORAGE_BROWSER_BLOCK_TO_BE_UPDATED },
+    React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__error-boundary` }, "Something went wrong.")));
+class ErrorBoundary extends React__namespace["default"].Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(_error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    render() {
+        const { hasError } = this.state;
+        const { children } = this.props;
         if (hasError) {
-            return { content: 'Error loading folders.', type: 'error' };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                content: 'Showing results for up to the first 10,000 items.',
-                type: 'info',
-            };
-        }
-    },
-    loadingIndicatorLabel: 'Loading',
-    overwriteWarningMessage: 'Copied files will overwrite existing files at selected destination.',
-    searchPlaceholder: 'Search for folders',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
-        if (COMPLETE === TOTAL) {
-            return {
-                content: 'All files copied.',
-                type: 'success',
-            };
-        }
-        if (FAILED === TOTAL) {
-            return { content: 'All files failed to copy.', type: 'error' };
+            return React__namespace["default"].createElement(Fallback, null);
         }
-        return {
-            content: `${COMPLETE} files copied, ${FAILED} files failed to copy.`,
-            type: 'error',
+        return children;
+    }
+}
+
+const defaultValue$5 = { data: {} };
+const { useControlsContext, ControlsContextProvider } = uiReactCore.createContextUtilities({
+    contextName: 'ControlsContext',
+    defaultValue: defaultValue$5,
+});
+
+const useActionCancel = () => {
+    const { data: { actionCancelLabel, isActionCancelDisabled }, onActionCancel, } = useControlsContext();
+    return {
+        onCancel: onActionCancel,
+        isDisabled: isActionCancelDisabled,
+        label: actionCancelLabel,
+    };
+};
+
+function useResolvedComposable(DefaultComposable, name) {
+    const { composables } = useComposables();
+    const Composable = React__namespace["default"].useMemo(() => {
+        const ResolvedComposable = (props) => {
+            const Resolved = composables?.[name] ?? DefaultComposable;
+            return React__namespace["default"].createElement(Resolved, { ...props });
         };
-    },
-    searchSubmitLabel: 'Submit',
-    searchClearLabel: 'Clear search',
+        ResolvedComposable.displayName = name;
+        return ResolvedComposable;
+    }, [composables, DefaultComposable, name]);
+    return Composable;
+}
+
+const ActionCancelControl = () => {
+    const props = useActionCancel();
+    const Resolved = useResolvedComposable(ActionCancel, 'ActionCancel');
+    return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const DEFAULT_DELETE_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Delete',
-    actionStartLabel: 'Delete',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
-        if (COMPLETE === TOTAL) {
-            return { content: 'All files deleted.', type: 'success' };
-        }
-        if (FAILED === TOTAL) {
-            return { content: 'All files failed to delete.', type: 'error' };
+const getNavigationItems = ({ destinationParts, location, onNavigate, }) => {
+    const { bucket, permissions, prefix = '', type } = location;
+    const destinationSubpaths = [];
+    return destinationParts.map((part, index) => {
+        const isCurrent = index === destinationParts.length - 1;
+        if (index !== 0) {
+            destinationSubpaths.push(part);
         }
+        const destinationPath = `${destinationSubpaths.concat('').join('/')}`;
+        const destination = {
+            id: crypto.randomUUID(),
+            type,
+            permissions,
+            bucket,
+            prefix,
+        };
         return {
-            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
-            type: 'error',
+            name: part,
+            ...(isCurrent && { isCurrent }),
+            onNavigate: () => {
+                onNavigate?.(destination, destinationPath);
+            },
         };
-    },
+    });
 };
 
-const DEFAULT_ERROR_MESSAGE$1 = 'There was an error loading items.';
-const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
-    getListItemsResultMessage: (data) => {
-        const { items, hasExhaustedSearch, hasError = false, message, isLoading, } = data ?? {};
-        if (isLoading) {
-            return undefined;
-        }
-        if (hasError) {
-            return {
-                type: 'error',
-                content: message ?? DEFAULT_ERROR_MESSAGE$1,
-            };
+const getNavigationParts = ({ location, path, includeBucketInPrefix, }) => {
+    const { bucket, prefix = '', type } = location;
+    const trimmedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
+    const trimmedPath = path.endsWith('/') ? path.slice(0, -1) : path;
+    const firstPrefixPart = [];
+    if (type !== 'BUCKET') {
+        if (includeBucketInPrefix) {
+            firstPrefixPart.push(bucket);
         }
-        if (!items?.length && hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `No results found in the first 10,000 items.`,
-            };
+        if (trimmedPrefix) {
+            if (includeBucketInPrefix) {
+                firstPrefixPart.push('/');
+            }
+            firstPrefixPart.push(trimmedPrefix);
         }
-        if (!items?.length) {
-            return {
-                type: 'info',
-                content: 'No files.',
-            };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `Showing results for up to the first 10,000 items.`,
-            };
-        }
-        // TODO: add more cases as needed
-        return undefined;
-    },
-    searchSubfoldersToggleLabel: 'Include subfolders',
-    searchPlaceholder: 'Search current folder',
-    tableColumnLastModifiedHeader: 'Last modified',
-    tableColumnNameHeader: 'Name',
-    tableColumnSizeHeader: 'Size',
-    tableColumnTypeHeader: 'Type',
-    selectFileLabel: 'Select file',
-    selectAllFilesLabel: 'Select all files',
-    getActionListItemLabel: (key = '') => {
-        switch (key) {
-            case 'Copy':
-                return 'Copy';
-            case 'Delete':
-                return 'Delete';
-            case 'Create folder':
-                return 'Create folder';
-            case 'Upload':
-                return 'Upload';
-            case 'Download':
-                return 'Download';
-            default:
-                return key;
-        }
-    },
-    getTitle: (location) => {
-        const { current, key } = location;
-        const { bucket = '' } = current ?? {};
-        return key || bucket;
-    },
+    }
+    const prefixParts = type === 'BUCKET' ? [bucket] : [firstPrefixPart.join('')];
+    if (type === 'BUCKET' && trimmedPrefix) {
+        prefixParts.push(trimmedPrefix);
+    }
+    const pathParts = trimmedPath ? trimmedPath.split('/') : [];
+    return prefixParts.concat(pathParts);
 };
 
-const DEFAULT_ERROR_MESSAGE = 'There was an error loading locations.';
-const DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
-    title: 'Home',
-    searchPlaceholder: 'Filter folders and files',
-    getListLocationsResultMessage: (data) => {
-        const { isLoading, items, hasExhaustedSearch, hasError = false, message, } = data ?? {};
-        if (isLoading) {
-            return undefined;
-        }
-        if (hasError) {
-            return {
-                type: 'error',
-                content: message ?? DEFAULT_ERROR_MESSAGE,
-            };
-        }
-        if (items?.length === 0 && !hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: 'No folders or files.',
-            };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `Showing results for up to the first 10,000 items.`,
-            };
-        }
-        // TODO: add more cases as needed
-        return undefined;
-    },
-    getPermissionName: (permissions) => {
-        let text = '';
-        if (permissions.includes('get') || permissions.includes('list')) {
-            text = 'Read';
-        }
-        if (permissions.includes('write') || permissions.includes('delete')) {
-            text = text ? 'Read/Write' : 'Write';
-        }
-        if (!text) {
-            text = permissions.join('/');
+const useActionDestination = () => {
+    const { data, onSelectDestination } = useControlsContext();
+    const { actionDestinationLabel, isActionDestinationNavigable, destination } = data;
+    return React__namespace["default"].useMemo(() => {
+        if (!destination?.current) {
+            return { items: [] };
         }
-        return text;
-    },
-    getDownloadLabel: (fileName) => `Download ${fileName}`,
-    tableColumnBucketHeader: 'Bucket',
-    tableColumnFolderHeader: 'Folder',
-    tableColumnPermissionsHeader: 'Permissions',
-    tableColumnActionsHeader: 'Actions',
+        const { current, path } = destination;
+        const destinationParts = getNavigationParts({
+            location: current,
+            path,
+        });
+        return {
+            label: actionDestinationLabel,
+            items: getNavigationItems({
+                location: current,
+                destinationParts,
+                onNavigate: onSelectDestination,
+            }),
+            isNavigable: isActionDestinationNavigable,
+        };
+    }, [
+        actionDestinationLabel,
+        isActionDestinationNavigable,
+        destination,
+        onSelectDestination,
+    ]);
 };
 
-const DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    actionStartLabel: 'Upload',
-    addFilesLabel: 'Add files',
-    addFolderLabel: 'Add folder',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, OVERWRITE_PREVENTED, CANCELED, TOTAL } = counts ?? {};
-        const hasPreventedOverwrite = !!OVERWRITE_PREVENTED;
-        const hasFailure = !!FAILED;
-        const hasSuccess = !!COMPLETE;
-        const hasCanceled = !!CANCELED;
-        const type = hasFailure
-            ? 'error'
-            : hasPreventedOverwrite || hasCanceled
-                ? 'warning'
-                : 'success';
-        const preventedOverwriteMessage = hasPreventedOverwrite
-            ? [
-                'Overwrite prevented for',
-                OVERWRITE_PREVENTED === TOTAL ? 'all' : String(OVERWRITE_PREVENTED),
-                OVERWRITE_PREVENTED > 1 || OVERWRITE_PREVENTED === TOTAL
-                    ? `files`
-                    : 'file',
-            ].join(' ')
-            : undefined;
-        const canceledMessage = hasCanceled
-            ? [
-                CANCELED === TOTAL ? 'All' : String(CANCELED),
-                CANCELED > 1 || CANCELED === TOTAL ? `uploads` : 'upload',
-                'canceled',
-            ].join(' ')
-            : undefined;
-        const failedMessage = hasFailure
-            ? [
-                FAILED === TOTAL ? 'All' : String(FAILED),
-                FAILED > 1 || FAILED === TOTAL ? `files` : 'file',
-                'failed to upload',
-            ].join(' ')
-            : undefined;
-        const completedMessage = hasSuccess
-            ? [
-                COMPLETE === TOTAL ? 'All' : String(COMPLETE),
-                COMPLETE > 1 || COMPLETE === TOTAL ? `files` : 'file',
-                'uploaded',
-            ].join(' ')
-            : undefined;
-        const messages = [
-            preventedOverwriteMessage,
-            failedMessage,
-            canceledMessage,
-            completedMessage,
-        ].filter(Boolean);
-        if (messages.length > 0) {
-            return {
-                content: messages.join(', ') + '.',
-                type,
-            };
+const ActionDestinationControl = () => {
+    const props = useActionDestination();
+    const Resolved = useResolvedComposable(ActionDestination$1, 'ActionDestination');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useActionExit = () => {
+    const { data: { actionExitLabel: label, isActionExitDisabled: isDisabled }, onActionExit: onExit, } = useControlsContext();
+    return { label, isDisabled, onExit };
+};
+
+const ActionExitControl = () => {
+    const props = useActionExit();
+    const Resolved = useResolvedComposable(ActionExit, 'ActionExit');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useActionsList = () => {
+    const { data: { actions, isActionsListDisabled }, onActionSelect, } = useControlsContext();
+    return {
+        isDisabled: isActionsListDisabled,
+        items: actions ?? [],
+        onActionSelect,
+    };
+};
+
+const ActionsListControl = () => {
+    const props = useActionsList();
+    const Resolved = useResolvedComposable(ActionsList$1, 'ActionsList');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useActionStart = () => {
+    const { data: { actionStartLabel, isActionStartDisabled }, onActionStart, } = useControlsContext();
+    return {
+        label: actionStartLabel,
+        isDisabled: isActionStartDisabled,
+        onStart: onActionStart,
+    };
+};
+
+const ActionStartControl = () => {
+    const props = useActionStart();
+    const Resolved = useResolvedComposable(ActionStart, 'ActionStart');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useAddFiles = () => {
+    const { data: { addFilesLabel, isAddFilesDisabled }, onAddFiles, } = useControlsContext();
+    return {
+        isDisabled: isAddFilesDisabled,
+        label: addFilesLabel,
+        onAddFiles,
+    };
+};
+
+const AddFilesControl = () => {
+    const props = useAddFiles();
+    const Resolved = useResolvedComposable(AddFiles, 'AddFiles');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useAddFolder = () => {
+    const { data: { addFolderLabel, isAddFolderDisabled }, onAddFolder, } = useControlsContext();
+    return {
+        isDisabled: isAddFolderDisabled,
+        label: addFolderLabel,
+        onAddFolder,
+    };
+};
+
+const AddFolderControl = () => {
+    const props = useAddFolder();
+    const Resolved = useResolvedComposable(AddFolder, 'AddFolder');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useDataRefresh = () => {
+    const { data: { isDataRefreshDisabled }, onRefresh, } = useControlsContext();
+    return { isDisabled: isDataRefreshDisabled, onRefresh };
+};
+
+const DataRefreshControl = () => {
+    const props = useDataRefresh();
+    const Resolved = useResolvedComposable(DataRefresh$1, 'DataRefresh');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const compareContent$3 = ({ label: a }, { label: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.localeCompare(b);
+};
+const compareButtonData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$3(a.content, b.content)
+    : compareContent$3(b.content, a.content);
+
+const compareContent$2 = ({ value: a }, { value: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.getTime() - b.getTime();
+};
+const compareDateData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$2(a.content, b.content)
+    : compareContent$2(b.content, a.content);
+
+const compareContent$1 = ({ value: a }, { value: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a - b;
+};
+const compareNumberData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$1(a.content, b.content)
+    : compareContent$1(b.content, a.content);
+
+const compareContent = ({ text: a }, { text: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.localeCompare(b);
+};
+const compareTextData = (a, b, direction) => direction === 'ascending'
+    ? compareContent(a.content, b.content)
+    : compareContent(b.content, a.content);
+
+const GROUP_ORDER = [
+    'checkbox',
+    'button',
+    'date',
+    'number',
+    'text',
+];
+const UNSORTABLE_GROUPS = ['checkbox'];
+const useDataTable = () => {
+    const { data } = useControlsContext();
+    const { isLoading, tableData } = data;
+    const defaultSortIndex = React__namespace["default"].useMemo(() => tableData?.headers?.findIndex(({ type }) => type === 'sort') ?? -1, [tableData]);
+    const [sortState, setSortState] = React__namespace["default"].useState({
+        index: defaultSortIndex,
+        direction: 'ascending',
+    });
+    const mappedHeaders = React__namespace["default"].useMemo(() => tableData?.headers.map((header, index) => {
+        const { type } = header;
+        switch (type) {
+            case 'sort': {
+                return {
+                    ...header,
+                    content: {
+                        ...header.content,
+                        onSort: () => {
+                            setSortState({
+                                index,
+                                direction: sortState.index === index
+                                    ? sortState.direction === 'ascending'
+                                        ? 'descending'
+                                        : 'ascending'
+                                    : 'ascending',
+                            });
+                        },
+                        sortDirection: sortState.index === index ? sortState.direction : undefined,
+                    },
+                };
+            }
+            case 'checkbox':
+            case 'text':
+            default: {
+                return header;
+            }
         }
-        return { content: 'All files uploaded.', type };
-    },
-    getFilesValidationMessage: (data) => {
-        if (!data?.invalidFiles) {
-            return undefined;
+    }), [sortState, tableData]);
+    const sortedRows = React__namespace["default"].useMemo(() => {
+        // Early return if there is no table data
+        if (!tableData) {
+            return;
         }
-        const invalidFileNames = data.invalidFiles
-            .map(({ file }) => file.name)
-            .join(', ');
-        if (invalidFileNames) {
-            return {
-                content: `Files larger than 160GB cannot be added to the upload queue: ${invalidFileNames}`,
-                type: 'warning',
-            };
+        // Return rows as is if there are no sortable columns
+        if (sortState.index < 0) {
+            return tableData.rows;
         }
-        return undefined;
-    },
-    overwriteToggleLabel: 'Overwrite existing files',
-    statusDisplayOverwritePreventedLabel: 'Overwrite prevented',
-    tableColumnProgressHeader: 'Progress',
-    title: 'Upload',
+        const { index, direction } = sortState;
+        const groupedRows = {
+            button: [],
+            checkbox: [],
+            date: [],
+            number: [],
+            text: [],
+        };
+        tableData.rows.forEach((row) => {
+            const { type } = row.content[index];
+            groupedRows[type].push(row);
+        });
+        const groupOrder = direction === 'ascending' ? GROUP_ORDER : [...GROUP_ORDER].reverse();
+        return groupOrder
+            .map((groupType) => {
+            if (UNSORTABLE_GROUPS.includes(groupType)) {
+                return groupedRows[groupType];
+            }
+            return groupedRows[groupType].sort((rowA, rowB) => {
+                switch (groupType) {
+                    case 'button': {
+                        return compareButtonData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'date': {
+                        return compareDateData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'number': {
+                        return compareNumberData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'text':
+                    default: {
+                        return compareTextData(rowA.content[index], rowB.content[index], direction);
+                    }
+                }
+            });
+        })
+            .flat();
+    }, [sortState, tableData]);
+    return {
+        headers: mappedHeaders ?? [],
+        isLoading,
+        rows: sortedRows ?? [],
+    };
 };
 
-const DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Download',
-    actionStartLabel: 'Download',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
-        if (COMPLETE === TOTAL) {
-            return { content: 'All files downloaded.', type: 'success' };
-        }
-        if (FAILED === TOTAL) {
-            return { content: 'All files failed to download.', type: 'error' };
+const DataTableControl = () => {
+    const props = useDataTable();
+    const Resolved = useResolvedComposable(DataTable, 'DataTable');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+/**
+ * This hook, not to be confused with the useDropZone vended from @aws-amplify/ui-react-core, is only intended for use
+ * with its corresponding DropZone control.
+ */
+const useDropZone = () => {
+    const { onDropFiles } = useControlsContext();
+    return { onDropFiles };
+};
+
+const DropZoneControl = ({ children, }) => {
+    const props = useDropZone();
+    const Resolved = useResolvedComposable(DropZone, 'DropZone');
+    return React__namespace["default"].createElement(Resolved, { ...props }, children);
+};
+
+const useFolderNameField = () => {
+    const { data, onValidateFolderName, onFolderNameChange } = useControlsContext();
+    const { folderNameId, folderNameLabel, folderNamePlaceholder, folderNameValidationMessage, isFolderNameDisabled, } = data;
+    return {
+        id: folderNameId,
+        isDisabled: isFolderNameDisabled,
+        label: folderNameLabel,
+        onChange: onFolderNameChange,
+        onValidate: onValidateFolderName,
+        placeholder: folderNamePlaceholder,
+        validationMessage: folderNameValidationMessage,
+    };
+};
+
+const FolderNameFieldControl = () => {
+    const props = useFolderNameField();
+    const Resolved = useResolvedComposable(FolderNameField$1, 'FolderNameField');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useLoadingIndicator = () => {
+    const { data: { isLoading, loadingIndicatorLabel: label }, } = useControlsContext();
+    return { isLoading, label };
+};
+
+const LoadingIndicatorControl = () => {
+    const props = useLoadingIndicator();
+    const Resolved = useResolvedComposable(LoadingIndicator$1, 'LoadingIndicator');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useMessage = () => {
+    const { data: { message = {} }, } = useControlsContext();
+    return message;
+};
+
+const MessageControl = () => {
+    const props = useMessage();
+    const Resolved = useResolvedComposable(Message, 'Message');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useNavigation = () => {
+    const { data, onNavigate, onNavigateHome } = useControlsContext();
+    const { location } = data;
+    return React__namespace["default"].useMemo(() => {
+        if (!location?.current) {
+            return { items: [] };
         }
+        const { current, path } = location;
+        const destinationParts = getNavigationParts({
+            location: current,
+            path,
+            includeBucketInPrefix: true,
+        });
+        const homeItem = [
+            { name: 'Home', onNavigate: onNavigateHome },
+        ];
         return {
-            content: `${COMPLETE} files downloaded, ${FAILED} files failed to download.`,
-            type: 'error',
+            items: homeItem.concat(getNavigationItems({ location: current, destinationParts, onNavigate })),
         };
-    },
+    }, [location, onNavigate, onNavigateHome]);
 };
 
-const DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT = {
-    CopyView: DEFAULT_COPY_VIEW_DISPLAY_TEXT,
-    CreateFolderView: DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT,
-    DeleteView: DEFAULT_DELETE_VIEW_DISPLAY_TEXT,
-    DownloadView: DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT,
-    LocationDetailView: DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT,
-    LocationsView: DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT,
-    UploadView: DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT,
+const NavigationControl = () => {
+    const props = useNavigation();
+    const Resolved = useResolvedComposable(Navigation$1, 'Navigation');
+    return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const { DisplayTextContext, useDisplayText } = uiReactCore.createContextUtilities({
-    contextName: 'DisplayText',
-    errorMessage: '`useDisplayText` must be called inside `DisplayTextProvider`',
-});
-function resolveDisplayText(displayText) {
-    if (!displayText)
-        return DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT;
-    // override
-    const { CopyView, CreateFolderView, DeleteView, DownloadView, LocationDetailView, LocationsView, UploadView, } = displayText;
+const useOverwriteToggle = () => {
+    const { data: { isOverwritingEnabled, isOverwriteToggleDisabled, overwriteToggleLabel, }, onToggleOverwrite, } = useControlsContext();
     return {
-        CopyView: { ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CopyView, ...CopyView },
-        CreateFolderView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CreateFolderView,
-            ...CreateFolderView,
-        },
-        DeleteView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DeleteView,
-            ...DeleteView,
-        },
-        DownloadView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DownloadView,
-            ...DownloadView,
-        },
-        LocationDetailView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
-            ...LocationDetailView,
-        },
-        LocationsView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,
-            ...LocationsView,
-        },
-        UploadView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.UploadView,
-            ...UploadView,
-        },
+        isDisabled: isOverwriteToggleDisabled,
+        isOverwritingEnabled,
+        label: overwriteToggleLabel,
+        onToggle: onToggleOverwrite,
     };
-}
-function DisplayTextProvider({ children, displayText: _override, }) {
-    // do deep merge here of default and override here
-    const resolvedDisplayText = React__namespace["default"].useMemo(() => resolveDisplayText(_override), [_override]);
-    return (React__namespace["default"].createElement(DisplayTextContext.Provider, { value: resolvedDisplayText }, children));
-}
+};
 
-const isCopyViewDisplayTextKey = (value) => !!DEFAULT_COPY_VIEW_DISPLAY_TEXT[value];
-const isDeleteViewDisplayTextKey = (value) => !!DEFAULT_DELETE_VIEW_DISPLAY_TEXT[value];
-const isDownloadViewDisplayTextKey = (value) => !!DEFAULT_DOWNLOAD_VIEW_DISPLAY_TEXT[value];
+const OverwriteToggleControl = () => {
+    const props = useOverwriteToggle();
+    const Resolved = useResolvedComposable(OverwriteToggle$1, 'OverwriteToggle');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const usePagination = () => {
+    const { data, onPaginate } = useControlsContext();
+    const { paginationData } = data;
+    return { ...paginationData, onPaginate };
+};
+
+const PaginationControl = () => {
+    const props = usePagination();
+    const Resolved = useResolvedComposable(Pagination$1, 'Pagination');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useSearchField = () => {
+    const { data, onSearch, onSearchClear, onSearchQueryChange } = useControlsContext();
+    const { searchPlaceholder, searchClearLabel, searchQuery, searchSubmitLabel, } = data;
+    return {
+        clearLabel: searchClearLabel,
+        placeholder: searchPlaceholder,
+        query: searchQuery,
+        submitLabel: searchSubmitLabel,
+        onClear: onSearchClear,
+        onQueryChange: onSearchQueryChange,
+        onSearch,
+    };
+};
+
+const SearchFieldControl = () => {
+    const props = useSearchField();
+    const Resolved = useResolvedComposable(SearchField$1, 'SearchField');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useSearchSubfoldersToggle = () => {
+    const { data: { isSearchingSubfolders, searchSubfoldersToggleLabel }, onToggleSearchSubfolders, } = useControlsContext();
+    return {
+        isSearchingSubfolders,
+        label: searchSubfoldersToggleLabel,
+        onToggle: onToggleSearchSubfolders,
+    };
+};
+
+const SearchSubfoldersToggleControl = () => {
+    const props = useSearchSubfoldersToggle();
+    const Resolved = useResolvedComposable(SearchSubfoldersToggle$1, 'SearchSubfoldersToggle');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useStatusDisplay = () => {
+    const { data } = useControlsContext();
+    const { statusCounts, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = data;
+    if (!statusCounts?.TOTAL) {
+        return { statuses: [], total: 0 };
+    }
+    const statuses = [
+        { name: statusDisplayCompletedLabel ?? '', count: statusCounts.COMPLETE },
+        { name: statusDisplayFailedLabel ?? '', count: statusCounts.FAILED },
+        { name: statusDisplayCanceledLabel ?? '', count: statusCounts.CANCELED },
+        { name: statusDisplayQueuedLabel ?? '', count: statusCounts.QUEUED },
+    ];
+    return { statuses, total: statusCounts.TOTAL };
+};
+
+const StatusDisplayControl = () => {
+    const props = useStatusDisplay();
+    const Resolved = useResolvedComposable(StatusDisplay$1, 'StatusDisplay');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useTitle = () => {
+    const { data } = useControlsContext();
+    return {
+        title: data?.title,
+    };
+};
+
+const TitleControl = () => {
+    const props = useTitle();
+    const Resolved = useResolvedComposable(Title$1, 'Title');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
 
 function useResolveTableData(keys, { getCell, getHeader, getRowKey }, { items, props }) {
     return React__namespace["default"].useMemo(() => {
@@ -4503,16 +5075,7 @@ const LocationActionView = ({ type, ...props }) => {
     return null;
 };
 
-const LOCATION_DETAIL_VIEW_HEADERS = [
-    'checkbox',
-    'name',
-    'type',
-    'last-modified',
-    'size',
-    'download',
-];
-
-const getFileRowContent = ({ permissions, isSelected, itemLocationKey, getDateDisplayValue, lastModified, rowId, rowKey, selectFileLabel, size, onDownload, onSelect, }) => LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
+const getFileRowContent = ({ filePreviewEnabled, permissions, isSelected, itemLocationKey, getDateDisplayValue, lastModified, rowId, rowKey, selectFileLabel, size, onDownload, onSelect, onClick, }) => LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
     const key = `${columnKey}-${rowId}`;
     switch (columnKey) {
         case 'checkbox': {
@@ -4530,11 +5093,13 @@ const getFileRowContent = ({ permissions, isSelected, itemLocationKey, getDateDi
         case 'name': {
             return {
                 key,
-                type: 'text',
+                type: filePreviewEnabled ? 'button' : 'text',
                 content: {
-                    icon: 'file',
-                    ariaLabel: 'file',
-                    text: rowKey.slice(itemLocationKey.length),
+                    icon: getFileThumbnail(rowKey),
+                    ariaLabel: `${rowKey.slice(itemLocationKey.length)} file`,
+                    ...(filePreviewEnabled
+                        ? { label: rowKey.slice(itemLocationKey.length), onClick }
+                        : { text: rowKey.slice(itemLocationKey.length) }),
                 },
             };
         }
@@ -4678,7 +5243,7 @@ const getHeaders$1 = ({ tableColumnLastModifiedHeader, tableColumnNameHeader, ta
     }
 });
 
-const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
+const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSelectActiveFile, areAllFilesSelected, displayText, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
     const { tableColumnLastModifiedHeader, tableColumnNameHeader, tableColumnSizeHeader, tableColumnTypeHeader, } = displayText;
     const headers = getHeaders$1({
         areAllFilesSelected,
@@ -4703,9 +5268,14 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                 const onFileSelect = () => {
                     onSelect(isSelected, locationItem);
                 };
+                const onClick = () => {
+                    onSelectActiveFile(locationItem);
+                };
                 return {
                     key: id,
+                    active: activeFile?.id === id,
                     content: getFileRowContent({
+                        filePreviewEnabled,
                         permissions: current?.permissions ?? [],
                         isSelected,
                         itemLocationKey: `${current?.prefix ?? ''}${path}`,
@@ -4717,6 +5287,7 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                         size,
                         onDownload: onFileDownload,
                         onSelect: onFileSelect,
+                        onClick,
                     }),
                 };
             }
@@ -4732,6 +5303,7 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                 };
                 return {
                     key: id,
+                    active: false,
                     content: getFolderRowContent({
                         itemSubPath,
                         rowId: id,
@@ -4747,7 +5319,7 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
 function LocationDetailViewProvider({ children, ...props }) {
     const { LocationDetailView: displayText } = useDisplayText();
     const { LocationDetailView: { loadingIndicatorLabel, searchSubfoldersToggleLabel, selectFileLabel, selectAllFilesLabel, searchPlaceholder, searchSubmitLabel, searchClearLabel, getActionListItemLabel, getDateDisplayValue, getTitle, getListItemsResultMessage, }, } = useDisplayText();
-    const { actionItems, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchSubfoldersEnabled, location, fileDataItems, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onToggleSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, } = props;
+    const { actionItems, activeFile, activeFileHasNext, activeFileHasPrev, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchSubfoldersEnabled, location, fileDataItems, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onSelectActiveFile, onToggleSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, filePreviewState, filePreviewEnabled, onRetryFilePreview, } = props;
     const actionsWithDisplayText = actionItems.map((item) => ({
         ...item,
         label: getActionListItemLabel(item.label),
@@ -4767,6 +5339,9 @@ function LocationDetailViewProvider({ children, ...props }) {
         actionItems.every(({ isHidden }) => isHidden);
     return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
             actions: actionsWithDisplayText,
+            activeFile,
+            activeFileHasNext,
+            activeFileHasPrev,
             isActionsListDisabled,
             isDataRefreshDisabled: isLoading,
             isLoading,
@@ -4783,7 +5358,11 @@ function LocationDetailViewProvider({ children, ...props }) {
             searchSubmitLabel,
             searchClearLabel,
             searchQuery,
+            filePreviewState,
             tableData: getLocationDetailViewTableData({
+                filePreviewEnabled,
+                activeFile,
+                onSelectActiveFile,
                 areAllFilesSelected,
                 displayText,
                 location,
@@ -4800,7 +5379,150 @@ function LocationDetailViewProvider({ children, ...props }) {
             }),
             title: getTitle(location),
             message: messageControlContent,
-        }, onActionSelect: onActionSelect, onDropFiles: onDropFiles, onNavigate: onNavigate, onNavigateHome: onNavigateHome, onPaginate: onPaginate, onRefresh: onRefresh, onSearch: onSearch, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear, onToggleSearchSubfolders: onToggleSearchSubfolders }, children));
+        }, onActionSelect: onActionSelect, onDropFiles: onDropFiles, onNavigate: onNavigate, onNavigateHome: onNavigateHome, onPaginate: onPaginate, onRefresh: onRefresh, onSearch: onSearch, onSelectActiveFile: onSelectActiveFile, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear, onToggleSearchSubfolders: onToggleSearchSubfolders, onRetryFilePreview: onRetryFilePreview }, children));
+}
+
+function resolveUrlOptions(options, fileType) {
+    if (!options) {
+        return DEFAULT_URL_OPTIONS;
+    }
+    if (typeof options === 'function' && fileType) {
+        return options(fileType) ?? DEFAULT_URL_OPTIONS;
+    }
+    return {
+        ...DEFAULT_URL_OPTIONS,
+        ...options,
+    };
+}
+
+function resolveMaxFileSize(maxFileSize, fileType) {
+    if (typeof maxFileSize === 'number') {
+        return maxFileSize;
+    }
+    if (typeof maxFileSize === 'function' && fileType) {
+        try {
+            const result = maxFileSize(fileType);
+            if (typeof result === 'number') {
+                return result;
+            }
+        }
+        catch (error) {
+            //
+        }
+    }
+    return fileType
+        ? DEFAULT_FILE_SIZE_LIMITS[fileType] || DEFAULT_FILE_SIZE_LIMIT
+        : DEFAULT_FILE_SIZE_LIMIT;
+}
+
+async function safeGetProperties(params) {
+    try {
+        return await storage.getProperties(params);
+    }
+    catch (error) {
+        return {};
+    }
+}
+
+function useFilePreview({ activeFile, }) {
+    const filePreviewContext = useFilePreviewContext();
+    const [enabled, setEnabled] = React.useState(true);
+    const getConfig = useGetActionInput();
+    const [{ location }] = useStore();
+    const [filePreviewContent, setFilePreviewContent] = React.useState({ isLoading: true });
+    const { fileTypeResolver, urlOptions, maxFileSize } = (filePreviewContext ?? {}) || {};
+    const getFilePreview = React.useCallback(async () => {
+        if (!activeFile || !activeFile?.key || !location.current) {
+            setEnabled(false);
+            return;
+        }
+        const config = getConfig(location.current);
+        const { accountId, customEndpoint, credentials } = config;
+        const sharedOptions = {
+            bucket: constructBucket(config),
+            expectedBucketOwner: accountId,
+        };
+        try {
+            setEnabled(true);
+            setFilePreviewContent({
+                isLoading: true,
+            });
+            const properties = await safeGetProperties({
+                path: activeFile.key,
+                options: sharedOptions,
+            });
+            const enrichedFile = {
+                ...activeFile,
+                ...properties,
+            };
+            const fileType = determineFileType({
+                fileData: enrichedFile,
+                fileTypeResolver,
+            });
+            const finalFile = {
+                ...enrichedFile,
+                fileType,
+            };
+            const sizeLimit = resolveMaxFileSize(maxFileSize, fileType);
+            const isLimitExceeded = ((finalFile.size || activeFile?.size) ?? 0) > sizeLimit;
+            if (isLimitExceeded) {
+                setFilePreviewContent({
+                    ok: false,
+                    isLoading: false,
+                    error: 'LIMIT_EXCEEDED',
+                });
+                return;
+            }
+            const { url } = await internals.getUrl({
+                path: finalFile.key,
+                options: {
+                    customEndpoint,
+                    locationCredentialsProvider: credentials,
+                    contentDisposition: 'attachment',
+                    ...sharedOptions,
+                    ...resolveUrlOptions(urlOptions, fileType),
+                },
+            });
+            setFilePreviewContent({
+                ok: true,
+                isLoading: false,
+                fileData: finalFile,
+                url: url.toString(),
+            });
+        }
+        catch (error) {
+            setFilePreviewContent({
+                isLoading: false,
+                ok: false,
+                error: 'GENERIC_ERROR',
+            });
+        }
+    }, [
+        location,
+        getConfig,
+        fileTypeResolver,
+        maxFileSize,
+        urlOptions,
+        activeFile,
+    ]);
+    React.useEffect(() => {
+        getFilePreview();
+    }, [getFilePreview, activeFile]);
+    return React.useMemo(() => {
+        if (filePreviewContext === false || !enabled) {
+            return {
+                optout: filePreviewContext === false,
+                enabled: false,
+                handleRetry: () => undefined,
+            };
+        }
+        return {
+            optout: false,
+            enabled: true,
+            handleRetry: () => getFilePreview(),
+            ...filePreviewContent,
+        };
+    }, [getFilePreview, filePreviewContext, filePreviewContent, enabled]);
 }
 
 const DEFAULT_PAGE_SIZE$1 = 100;
@@ -4823,6 +5545,7 @@ const useLocationDetailView = (options) => {
     const [{ location, actionType }, storeDispatch] = useStore();
     const [locationItems, locationItemsDispatch] = useLocationItems();
     const fileItemsDispatch = useFileItems()[1];
+    const [activeFile, setActiveFile] = React__namespace["default"].useState();
     const { current, key } = location;
     const { permissions, prefix } = current ?? {};
     const { fileDataItems } = locationItems;
@@ -4861,7 +5584,62 @@ const useLocationDetailView = (options) => {
         handleList({ prefix: key, options: searchOptions });
         locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
     };
+    const { activeFileHasPrev, activeFileHasNext } = React__namespace["default"].useMemo(() => {
+        if (!activeFile)
+            return {
+                activeFileHasNext: false,
+                activeFileHasPrev: false,
+            };
+        const idx = pageItems.findIndex((item) => item.id === activeFile?.id);
+        let pIdx = idx;
+        do {
+            --pIdx;
+        } while (pIdx >= 0 && pageItems[pIdx].type !== 'FILE');
+        let nIdx = idx;
+        do {
+            ++nIdx;
+        } while (nIdx <= pageItems.length - 1 && pageItems[nIdx].type !== 'FILE');
+        return {
+            activeFileHasPrev: pIdx >= 0,
+            activeFileHasNext: nIdx <= pageItems.length - 1,
+        };
+    }, [activeFile, pageItems]);
+    const getSuitableNextItem = React.useCallback((direction, type) => {
+        // first find the position
+        let newIdx = pageItems.findIndex((item) => item.id === activeFile?.id);
+        if (direction === 'prev') {
+            do {
+                --newIdx;
+            } while (newIdx >= 0 && pageItems[newIdx].type !== type);
+            if (pageItems[newIdx].type === type) {
+                return pageItems[newIdx];
+            }
+        }
+        else {
+            do {
+                ++newIdx;
+            } while (newIdx <= pageItems.length - 1 &&
+                pageItems[newIdx].type !== type);
+            if (pageItems[newIdx].type === type) {
+                return pageItems[newIdx];
+            }
+        }
+    }, [activeFile, pageItems]);
+    const onSelectActiveFile = (arg) => {
+        if (arg === 'prev') {
+            setActiveFile(getSuitableNextItem('prev', 'FILE'));
+        }
+        else if (arg === 'next') {
+            setActiveFile(getSuitableNextItem('next', 'FILE'));
+        }
+        else {
+            setActiveFile(arg);
+        }
+    };
     const { searchQuery, isSearchingSubfolders: isSearchSubfoldersEnabled, onSearchQueryChange, onSearchSubmit, onToggleSearchSubfolders, resetSearch, } = useSearch({ onSearch });
+    const { handleRetry, optout, ...filePreviewState } = useFilePreview({
+        activeFile,
+    });
     const onRefresh = () => {
         if (hasInvalidPrefix)
             return;
@@ -4871,6 +5649,7 @@ const useLocationDetailView = (options) => {
             prefix: key,
             options: { ...listOptions, refresh: true },
         });
+        setActiveFile(undefined);
         locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
     };
     React__namespace["default"].useEffect(() => {
@@ -4881,6 +5660,7 @@ const useLocationDetailView = (options) => {
             options: { ...listOptions, refresh: true },
         });
         handleReset();
+        setActiveFile(undefined);
     }, [handleList, handleReset, listOptions, hasInvalidPrefix, key]);
     const { actionConfigs } = useActionConfigs();
     const actionItems = React__namespace["default"].useMemo(() => {
@@ -4905,6 +5685,10 @@ const useLocationDetailView = (options) => {
     return {
         actionItems,
         actionType,
+        activeFile,
+        activeFileHasNext,
+        activeFileHasPrev,
+        onSelectActiveFile,
         page: currentPage,
         pageItems,
         location,
@@ -4917,8 +5701,13 @@ const useLocationDetailView = (options) => {
         downloadErrorMessage: getDownloadErrorMessageFromFailedDownloadTask(task),
         isLoading,
         isSearchSubfoldersEnabled,
-        onPaginate: handlePaginate,
+        onPaginate: (p) => {
+            handlePaginate(p);
+            setActiveFile(undefined);
+        },
         searchQuery,
+        filePreviewState,
+        filePreviewEnabled: !optout,
         hasExhaustedSearch,
         onRefresh,
         onActionExit: () => {
@@ -4936,6 +5725,7 @@ const useLocationDetailView = (options) => {
             resetSearch();
             storeDispatch({ type: 'CHANGE_LOCATION', location, path });
             locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
+            setActiveFile(undefined);
         },
         onDropFiles: (files) => {
             fileItemsDispatch({ type: 'ADD_FILES', files });
@@ -4968,7 +5758,10 @@ const useLocationDetailView = (options) => {
                 ? { type: 'RESET_LOCATION_ITEMS' }
                 : { type: 'SET_LOCATION_ITEMS', items: fileItems });
         },
-        onSearch: onSearchSubmit,
+        onSearch: () => {
+            setActiveFile(undefined);
+            onSearchSubmit();
+        },
         onSearchClear: () => {
             resetSearch();
             if (hasInvalidPrefix)
@@ -4977,10 +5770,29 @@ const useLocationDetailView = (options) => {
             handleReset();
         },
         onSearchQueryChange,
+        onRetryFilePreview: handleRetry,
         onToggleSearchSubfolders,
     };
 };
 
+function FilePreviewControl() {
+    const { data, onRetryFilePreview, onSelectActiveFile } = useControlsContext();
+    const { filePreviewState, activeFile, activeFileHasNext, activeFileHasPrev } = data;
+    const props = {
+        filePreview: filePreviewState,
+        activeFile,
+        activeFileHasNext,
+        activeFileHasPrev,
+        onRetryFilePreview,
+        onSelectActiveFile,
+    };
+    const Resolved = useResolvedComposable(FilePreview, 'FilePreview');
+    if (!activeFile) {
+        return null;
+    }
+    return React__namespace["default"].createElement(Resolved, { ...props });
+}
+
 const LocationDetailView = ({ className, ...props }) => {
     const state = useLocationDetailView(props);
     const { hasError } = state;
@@ -4995,10 +5807,12 @@ const LocationDetailView = ({ className, ...props }) => {
                 React__namespace["default"].createElement(PaginationControl, null),
                 React__namespace["default"].createElement(DataRefreshControl, null),
                 React__namespace["default"].createElement(ActionsListControl, null)),
-            hasError ? null : (React__namespace["default"].createElement(DropZoneControl, null,
-                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
-                    React__namespace["default"].createElement(LoadingIndicatorControl, null),
-                    React__namespace["default"].createElement(DataTableControl, null)))),
+            hasError ? null : (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__content-with-preview` },
+                React__namespace["default"].createElement(DropZoneControl, null,
+                    React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                        React__namespace["default"].createElement(LoadingIndicatorControl, null),
+                        React__namespace["default"].createElement(DataTableControl, null))),
+                React__namespace["default"].createElement(FilePreviewControl, null))),
             React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
                 React__namespace["default"].createElement(MessageControl, null)))));
 };
@@ -5015,6 +5829,7 @@ LocationDetailView.Refresh = DataRefreshControl;
 LocationDetailView.Search = SearchFieldControl;
 LocationDetailView.SearchSubfoldersToggle = SearchSubfoldersToggleControl;
 LocationDetailView.Title = TitleControl;
+LocationDetailView.FilePreview = FilePreviewControl;
 
 const getHeaders = ({ hasObjectLocations, tableColumnActionsHeader, tableColumnBucketHeader, tableColumnFolderHeader, tableColumnPermissionsHeader, }) => {
     const headers = [
@@ -5343,7 +6158,7 @@ const useView = (type) => {
     return USE_VIEW_HOOKS[type]();
 };
 
-function createProvider({ actions, components, config, options, }) {
+function createProvider({ actions, components, config, options, filePreview = {}, }) {
     const { accountId, customEndpoint, registerAuthListener, getLocationCredentials, region, listLocations, } = config;
     const resolvedActions = {
         default: {
@@ -5386,7 +6201,8 @@ function createProvider({ actions, components, config, options, }) {
                             React__namespace["default"].createElement(ViewsProvider, { actions: resolvedActions, views: views },
                                 React__namespace["default"].createElement(ComponentsProvider, { composables: composables },
                                     React__namespace["default"].createElement(LocationItemsProvider, null,
-                                        React__namespace["default"].createElement(FileItemsProvider, { validateFile: validateFile }, children))))))))));
+                                        React__namespace["default"].createElement(FileItemsProvider, { validateFile: validateFile },
+                                            React__namespace["default"].createElement(FilePreviewProvider, { filePreview: filePreview }, children)))))))))));
     }
     return Provider;
 }