@aws-amplify/ui-react-storage 3.3.9 → 3.4.0

package/dist/esm/components/StorageBrowser/composables/ActionExit.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const ActionExit = ({ onExit, isDisabled = false, label, }) => (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK}__exit`, variant: "exit", onClick: onExit, disabled: isDisabled },
+    React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__action-exit-icon`, variant: "exit" }),
+    ' ',
+    label));
+
+export { ActionExit };

package/dist/esm/components/StorageBrowser/composables/ActionStart.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const ActionStart = ({ onStart, isDisabled, label, }) => (React__default.createElement(ButtonElement, { variant: "primary", className: `${STORAGE_BROWSER_BLOCK}__action-start`, onClick: onStart, disabled: isDisabled }, label));
+
+export { ActionStart };

package/dist/esm/components/StorageBrowser/composables/ActionsList.mjs

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { DropdownMenu } from '../components/DropdownMenu.mjs';
+
+const ActionsList = ({ isDisabled, items, onActionSelect, }) => {
+    return (React__default.createElement(DropdownMenu, { isDisabled: isDisabled, items: items.map((item) => ({ ...item, id: item.actionType })), onItemSelect: onActionSelect }));
+};
+
+export { ActionsList };

package/dist/esm/components/StorageBrowser/composables/AddFiles.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+const AddFiles = ({ onAddFiles, isDisabled, label, }) => (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__add-files`, disabled: isDisabled, onClick: onAddFiles, variant: "add-files" }, label));
+
+export { AddFiles };

package/dist/esm/components/StorageBrowser/composables/AddFolder.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+const AddFolder = ({ onAddFolder, isDisabled, label, }) => (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__add-folder`, disabled: isDisabled, onClick: onAddFolder, variant: "add-folder" }, label));
+
+export { AddFolder };

package/dist/esm/components/StorageBrowser/composables/DataRefresh.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+const DataRefresh = ({ onRefresh, isDisabled = false, }) => (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__data-refresh`, "aria-label": "Refresh data", variant: "refresh", onClick: onRefresh, disabled: isDisabled },
+    React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__data-refresh-icon`, variant: "refresh" })));
+
+export { DataRefresh };

package/dist/esm/components/StorageBrowser/composables/DataTable/DataTable.mjs

@@ -0,0 +1,77 @@
+import React__default from 'react';
+import { Table } from '../../components/Table.mjs';
+import { SortHeader } from './headers/SortHeader.mjs';
+import { TextHeader } from './headers/TextHeader.mjs';
+import { ButtonDataCell } from './dataCells/ButtonDataCell.mjs';
+import { DateDataCell } from './dataCells/DateDataCell.mjs';
+import { NumberDataCell } from './dataCells/NumberDataCell.mjs';
+import { CheckboxDataCell } from './dataCells/CheckboxDataCell.mjs';
+import { TextDataCell } from './dataCells/TextDataCell.mjs';
+import { CheckboxHeader } from './headers/CheckboxHeader.mjs';
+
+const DataTable = ({ headers, rows, }) => {
+    const mappedHeaders = headers.map(({ key, content, type }) => {
+        switch (type) {
+            case 'checkbox': {
+                return {
+                    key,
+                    content: React__default.createElement(CheckboxHeader, { content: content }),
+                };
+            }
+            case 'sort': {
+                return {
+                    key,
+                    content: React__default.createElement(SortHeader, { content: content }),
+                };
+            }
+            case 'text':
+            default: {
+                return {
+                    key,
+                    content: React__default.createElement(TextHeader, { content: content }),
+                };
+            }
+        }
+    });
+    const mappedRows = rows.map(({ key, content }) => ({
+        key,
+        content: content.map(({ key, content, type }) => {
+            switch (type) {
+                case 'button': {
+                    return {
+                        key,
+                        content: React__default.createElement(ButtonDataCell, { content: content }),
+                    };
+                }
+                case 'checkbox': {
+                    return {
+                        key,
+                        content: React__default.createElement(CheckboxDataCell, { content: content }),
+                    };
+                }
+                case 'date': {
+                    return {
+                        key,
+                        content: React__default.createElement(DateDataCell, { content: content }),
+                    };
+                }
+                case 'number': {
+                    return {
+                        key,
+                        content: React__default.createElement(NumberDataCell, { content: content }),
+                    };
+                }
+                case 'text':
+                default: {
+                    return {
+                        key,
+                        content: React__default.createElement(TextDataCell, { content: content }),
+                    };
+                }
+            }
+        }),
+    }));
+    return React__default.createElement(Table, { headers: mappedHeaders, rows: mappedRows });
+};
+
+export { DataTable };

package/dist/esm/components/StorageBrowser/composables/DataTable/dataCells/ButtonDataCell.mjs

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../../../context/elements/definitions.mjs';
+import { IconElement } from '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+
+const ButtonDataCell = ({ content, }) => {
+    const { ariaLabel, isDisabled, icon, label, onClick } = content;
+    // Special handling for icon-only cancel buttons
+    let buttonVariant = 'table-data';
+    const isIconOnlyButton = !!icon && !label;
+    if (isIconOnlyButton && icon === 'cancel') {
+        buttonVariant = 'cancel';
+    }
+    return (React__default.createElement(ButtonElement, { className: [
+            `${STORAGE_BROWSER_BLOCK}__table-button-data-cell`,
+            isIconOnlyButton
+                ? `${STORAGE_BROWSER_BLOCK}__table-button-data-cell--icon-only`
+                : '',
+        ].join(' '), disabled: isDisabled, onClick: onClick, "aria-label": ariaLabel, variant: buttonVariant },
+        icon && (React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__table-button-data-cell-icon--${icon}`, variant: icon })),
+        label));
+};
+
+export { ButtonDataCell };

package/dist/esm/components/StorageBrowser/composables/DataTable/dataCells/CheckboxDataCell.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { Checkbox } from '@aws-amplify/ui-react';
+
+const CheckboxDataCell = ({ content, }) => {
+    const { checked = false, label, onSelect, id } = content;
+    return (React__default.createElement(Checkbox, { name: label ?? '', checked: checked, labelHidden: true, label: label, onChange: onSelect, id: id }));
+};
+
+export { CheckboxDataCell };

package/dist/esm/components/StorageBrowser/composables/DataTable/dataCells/DateDataCell.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+
+const DateDataCell = ({ content, }) => {
+    const { value, displayValue } = content;
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-date-data-cell` }, displayValue ?? value?.toLocaleString()));
+};
+
+export { DateDataCell };

package/dist/esm/components/StorageBrowser/composables/DataTable/dataCells/NumberDataCell.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+
+const NumberDataCell = ({ content, }) => {
+    const { displayValue, value } = content;
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-number-data-cell` }, displayValue ?? value));
+};
+
+export { NumberDataCell };

package/dist/esm/components/StorageBrowser/composables/DataTable/dataCells/TextDataCell.mjs

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, SpanElement } from '../../../context/elements/definitions.mjs';
+import { IconElement } from '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+
+const TextDataCell = ({ content, }) => {
+    const { icon, text } = content;
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell` },
+        icon && (React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell-icon ${STORAGE_BROWSER_BLOCK}__table-text-data-cell-icon--${icon}`, variant: icon })),
+        React__default.createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell-text`, title: text }, text)));
+};
+
+export { TextDataCell };

package/dist/esm/components/StorageBrowser/composables/DataTable/headers/CheckboxHeader.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { Checkbox } from '@aws-amplify/ui-react';
+
+const CheckboxHeader = ({ content, }) => {
+    const { checked = false, label, onSelect, id } = content;
+    return (React__default.createElement(Checkbox, { name: label ?? '', checked: checked, labelHidden: true, label: label, onChange: onSelect, id: id }));
+};
+
+export { CheckboxHeader };

package/dist/esm/components/StorageBrowser/composables/DataTable/headers/SortHeader.mjs

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../../../context/elements/definitions.mjs';
+import { IconElement } from '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+
+const SortHeader = ({ content }) => {
+    const { label, sortDirection, onSort } = content;
+    return (React__default.createElement(ButtonElement, { variant: "sort", className: `${STORAGE_BROWSER_BLOCK}__table-sort-header`, onClick: onSort },
+        label,
+        React__default.createElement(IconElement, { variant: `sort-${sortDirection ?? 'indeterminate'}` })));
+};
+
+export { SortHeader };

package/dist/esm/components/StorageBrowser/composables/DataTable/headers/TextHeader.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../../../constants.mjs';
+
+const TextHeader = ({ content }) => {
+    const { text } = content;
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__table-text-header` }, text));
+};
+
+export { TextHeader };

package/dist/esm/components/StorageBrowser/composables/DropZone.mjs

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { useDropZone } from '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const DropZone = ({ children, onDropFiles, }) => {
+    const { dragState, ...dropHandlers } = useDropZone({
+        onDropComplete: ({ acceptedFiles }) => {
+            onDropFiles?.(acceptedFiles);
+        },
+    });
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__drop-zone ${STORAGE_BROWSER_BLOCK}__drop-zone${dragState !== 'inactive' ? '--active' : ''}`, ...dropHandlers }, children));
+};
+
+export { DropZone };

package/dist/esm/components/StorageBrowser/composables/FolderNameField.mjs

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { Field } from '../components/Field.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+function FolderNameField({ id, isDisabled, label, onChange, onValidate, placeholder, validationMessage, }) {
+    const handleValidate = ({ target: { value }, }) => {
+        onValidate?.(value);
+    };
+    return (React__default.createElement(Field, { "aria-describedby": id, "aria-invalid": !!validationMessage, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__folder-name-field`, disabled: isDisabled, id: id, label: label, onBlur: handleValidate, onChange: (event) => {
+            if (validationMessage)
+                handleValidate?.(event);
+            onChange?.(event.target.value);
+        }, placeholder: placeholder, type: "text" }, validationMessage));
+}
+
+export { FolderNameField };

package/dist/esm/components/StorageBrowser/composables/LoadingIndicator.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, SpanElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+function LoadingIndicator({ label, isLoading, }) {
+    return !isLoading ? null : (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator` },
+        React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator-icon`, variant: "loading" }),
+        React__default.createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator-label`, "aria-live": "polite" }, label)));
+}
+
+export { LoadingIndicator };

package/dist/esm/components/StorageBrowser/composables/Message.mjs

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const Message = ({ content, id, onDismiss, type, }) => {
+    let ariaLabel;
+    switch (type) {
+        case 'error':
+            ariaLabel = 'Error';
+            break;
+        case 'info':
+            ariaLabel = 'Information';
+            break;
+        case 'warning':
+            ariaLabel = 'Warning';
+            break;
+        case 'success':
+            ariaLabel = 'Success';
+            break;
+    }
+    return !content ? null : (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message`, role: "alert", variant: type },
+        React__default.createElement(IconElement, { variant: type, "aria-label": ariaLabel }),
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message-content` }, content),
+        !onDismiss ? null : (React__default.createElement(ButtonElement, { onClick: () => onDismiss(id), className: `${STORAGE_BROWSER_BLOCK}__message-dismiss`, variant: "message-dismiss", "aria-label": "Dismiss message", role: "button" },
+            React__default.createElement(IconElement, { variant: "dismiss", className: `${STORAGE_BROWSER_BLOCK}__message-dismiss-icon` })))));
+};
+
+export { Message };

package/dist/esm/components/StorageBrowser/composables/Navigation.mjs

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { BreadcrumbNavigation } from '../components/BreadcrumbNavigation.mjs';
+
+const Navigation = ({ items, }) => {
+    if (!items.length) {
+        return null;
+    }
+    return React__default.createElement(BreadcrumbNavigation, { breadcrumbs: items });
+};
+
+export { Navigation };

package/dist/esm/components/StorageBrowser/composables/OverwriteToggle.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement, InputElement, LabelElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+
+const OVERWRITE_TOGGLE_ID = 'overwrite-toggle';
+const OverwriteToggle = ({ isOverwritingEnabled, isDisabled, label, onToggle, }) => (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__overwrite-toggle` },
+    React__default.createElement(InputElement, { checked: isOverwritingEnabled, disabled: isDisabled, id: OVERWRITE_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
+    React__default.createElement(LabelElement, { htmlFor: OVERWRITE_TOGGLE_ID }, label)));
+
+export { OverwriteToggle };

package/dist/esm/components/StorageBrowser/composables/Pagination.mjs

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { NavElement, OrderedListElement, ListItemElement, SpanElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { PaginationButton } from '../components/PaginationButton.mjs';
+
+const Pagination = ({ page, hasNextPage, onPaginate, highestPageVisited, }) => {
+    if (!page)
+        return null;
+    return (React__default.createElement(NavElement, { "aria-label": 'Pagination', className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination` },
+        React__default.createElement(OrderedListElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list` },
+            React__default.createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__default.createElement(PaginationButton, { isDisabled: page <= 1, onClick: () => {
+                        if (onPaginate)
+                            onPaginate(page - 1);
+                    }, type: "previous" })),
+            React__default.createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__default.createElement(SpanElement, { "aria-label": `Page ${page}`, "aria-current": "page", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-current-page` }, page)),
+            React__default.createElement(ListItemElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-list-item` },
+                React__default.createElement(PaginationButton, { isDisabled: !highestPageVisited ||
+                        (page >= highestPageVisited && !hasNextPage), onClick: () => {
+                        if (onPaginate)
+                            onPaginate(page + 1);
+                    }, type: "next" })))));
+};
+
+export { Pagination };

package/dist/esm/components/StorageBrowser/composables/SearchField.mjs

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { Field } from '../components/Field.mjs';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+const SearchField = ({ id, label, clearLabel, submitLabel, onSearch, onClear, placeholder, query = '', onQueryChange, }) => {
+    // FIXME: focus not returning to input field after clear
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Field, { id: id, label: label, icon: React__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__default.createElement(ButtonElement, { "aria-label": clearLabel, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-field-clear`, onClick: onClear, variant: "refresh" },
+            React__default.createElement(IconElement, { variant: "dismiss" }))) : null),
+        React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__search-submit`, onClick: onSearch }, submitLabel)));
+};
+
+export { SearchField };

package/dist/esm/components/StorageBrowser/composables/SearchSubfoldersToggle.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement, InputElement, LabelElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+
+const SEARCH_SUBFOLDERS_TOGGLE_ID = 'search-subfolders-toggle';
+const SearchSubfoldersToggle = ({ isSearchingSubfolders, label, onToggle, }) => (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search-subfolders-toggle` },
+    React__default.createElement(InputElement, { checked: isSearchingSubfolders, id: SEARCH_SUBFOLDERS_TOGGLE_ID, onChange: onToggle, type: "checkbox" }),
+    React__default.createElement(LabelElement, { htmlFor: SEARCH_SUBFOLDERS_TOGGLE_ID }, label)));
+
+export { SearchSubfoldersToggle };

package/dist/esm/components/StorageBrowser/composables/StatusDisplay.mjs

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { DescriptionList } from '../components/DescriptionList.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const StatusDisplay = ({ statuses, total, }) => {
+    if (!statuses?.length) {
+        return null;
+    }
+    const descriptions = statuses.map(({ name, count }) => ({
+        term: name,
+        details: `${count}/${total}`,
+    }));
+    return (React__default.createElement(DescriptionList, { className: `${STORAGE_BROWSER_BLOCK}__status-display`, descriptions: descriptions }));
+};
+
+export { StatusDisplay };

package/dist/esm/components/StorageBrowser/composables/Title.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { HeadingElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const Title = ({ title }) => (React__default.createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__title` }, title));
+
+export { Title };

package/dist/esm/components/StorageBrowser/composables/context.mjs

@@ -0,0 +1,9 @@
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+
+const defaultValue = {};
+const { useComposables, ComposablesProvider } = createContextUtilities({
+    contextName: 'Composables',
+    defaultValue,
+});
+
+export { ComposablesProvider, useComposables };

package/dist/esm/components/StorageBrowser/composables/defaults.mjs

@@ -0,0 +1,45 @@
+import { ActionCancel } from './ActionCancel.mjs';
+import { ActionDestination } from './ActionDestination.mjs';
+import { ActionExit } from './ActionExit.mjs';
+import { ActionStart } from './ActionStart.mjs';
+import { ActionsList } from './ActionsList.mjs';
+import { AddFiles } from './AddFiles.mjs';
+import { AddFolder } from './AddFolder.mjs';
+import { DataRefresh } from './DataRefresh.mjs';
+import { DataTable } from './DataTable/DataTable.mjs';
+import { DropZone } from './DropZone.mjs';
+import { FolderNameField } from './FolderNameField.mjs';
+import { LoadingIndicator } from './LoadingIndicator.mjs';
+import { Message } from './Message.mjs';
+import { Navigation } from './Navigation.mjs';
+import { OverwriteToggle } from './OverwriteToggle.mjs';
+import { Pagination } from './Pagination.mjs';
+import { SearchField } from './SearchField.mjs';
+import { SearchSubfoldersToggle } from './SearchSubfoldersToggle.mjs';
+import { StatusDisplay } from './StatusDisplay.mjs';
+import { Title } from './Title.mjs';
+
+const DEFAULT_COMPOSABLES = {
+    ActionCancel,
+    ActionDestination,
+    ActionExit,
+    ActionStart,
+    ActionsList,
+    AddFiles,
+    AddFolder,
+    DataRefresh,
+    DataTable,
+    DropZone,
+    FolderNameField,
+    LoadingIndicator,
+    Message,
+    Navigation,
+    OverwriteToggle,
+    Pagination,
+    SearchSubfoldersToggle,
+    SearchField,
+    StatusDisplay,
+    Title,
+};
+
+export { DEFAULT_COMPOSABLES };

package/dist/esm/components/StorageBrowser/constants.mjs

@@ -0,0 +1,4 @@
+const STORAGE_BROWSER_BLOCK_TO_BE_UPDATED = 'storage-browser';
+const STORAGE_BROWSER_BLOCK = 'amplify-storage-browser';
+
+export { STORAGE_BROWSER_BLOCK, STORAGE_BROWSER_BLOCK_TO_BE_UPDATED };

package/dist/esm/components/StorageBrowser/context/elements/IconElement.mjs

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { defineBaseElement } from '@aws-amplify/ui-react-core/elements';
+import { useIcons, STORAGE_BROWSER_ICON_PATHS } from '@aws-amplify/ui-react/internal';
+export { STORAGE_BROWSER_ICON_PATHS } from '@aws-amplify/ui-react/internal';
+
+const DEFAULT_ICON_ATTRIBUTES = {
+    'aria-hidden': true,
+    width: '24',
+    height: '24',
+    // `viewBox` coordinates map to `path` data in STORAGE_BROWSER_ICON_PATHS
+    viewBox: '0 -960 960 960',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    role: 'img',
+};
+const BaseIconElement = defineBaseElement({
+    type: 'svg',
+    displayName: 'Icon',
+});
+const getIconProps = ({ variant, ...props }) => {
+    const pathData = variant ? STORAGE_BROWSER_ICON_PATHS[variant] : undefined;
+    const children = pathData ? (React__default.createElement("path", { d: pathData, fill: "currentColor" })) : undefined;
+    return {
+        ...DEFAULT_ICON_ATTRIBUTES,
+        ...props,
+        children: props.children ?? children,
+        variant,
+    };
+};
+const IconElement = (props) => {
+    const { variant } = props;
+    const icons = useIcons('storageBrowser');
+    const icon = variant ? icons?.[variant] : undefined;
+    if (icon) {
+        return React__default.createElement(React__default.Fragment, null, icon);
+    }
+    return React__default.createElement(BaseIconElement, { ...getIconProps(props) });
+};
+
+export { BaseIconElement, IconElement };