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

package/dist/createAmplifyAuthAdapter-BRctUWdR.js

@@ -0,0 +1,4868 @@
+'use strict';
+
+var React = require('react');
+var uiReactCore = require('@aws-amplify/ui-react-core');
+var uiReact = require('@aws-amplify/ui-react');
+var elements = require('@aws-amplify/ui-react-core/elements');
+var internal = require('@aws-amplify/ui-react/internal');
+var ui = require('@aws-amplify/ui');
+var internals = require('@aws-amplify/storage/internals');
+var storage = require('aws-amplify/storage');
+var awsAmplify = require('aws-amplify');
+var auth = require('aws-amplify/auth');
+var utils = require('aws-amplify/utils');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const defaultValue$9 = {};
+const { useComposables, ComposablesProvider } = uiReactCore.createContextUtilities({
+    contextName: 'Composables',
+    defaultValue: defaultValue$9,
+});
+
+function Button(props) {
+    const { disabled, variant } = props;
+    switch (variant) {
+        case 'menu-item':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, variation: "link", size: "small", borderRadius: "0", justifyContent: "flex-start" }));
+        case 'cancel':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small", variation: "link", colorTheme: "error" }));
+        case 'primary':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, isDisabled: disabled, size: "small", variation: "primary" }));
+        case 'exit':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small", paddingInline: "xs", variation: "link" }));
+        case 'message-dismiss':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small", variation: "link", colorTheme: "overlay" }));
+        case 'navigate':
+        case 'paginate-current':
+        case 'paginate-next':
+        case 'paginate-previous':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small", paddingInline: "xs", variation: "link" }));
+        case 'menu-toggle':
+        case 'download':
+        case 'refresh':
+        case 'sort':
+            return React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small", variation: "link" });
+        case 'table-data':
+            return (React__namespace["default"].createElement(uiReact.Button, { ...props, variation: "link", size: "small", textDecoration: "underline" }));
+        default:
+            return React__namespace["default"].createElement(uiReact.Button, { ...props, size: "small" });
+    }
+}
+function DescriptionTerm(props) {
+    return React__namespace["default"].createElement(uiReact.View, { ...props, as: "dt", fontWeight: "bold" });
+}
+function Label(props) {
+    const { children } = props;
+    return React__namespace["default"].createElement(uiReact.Label, { ...props }, children);
+}
+function Input(props) {
+    const { type } = props;
+    if (type === 'checkbox') {
+        return React__namespace["default"].createElement("input", { ...props });
+    }
+    return React__namespace["default"].createElement(uiReact.Input, { ...props });
+}
+function Heading(props) {
+    return (React__namespace["default"].createElement(uiReact.Heading, { ...props, level: 2, fontSize: "large", fontWeight: "bold", alignSelf: "center" }));
+}
+function Span(props) {
+    const { variant } = props;
+    if (variant === 'navigation-text' || variant === 'destination-text') {
+        return (React__namespace["default"].createElement(uiReact.View, { ...props, as: "span", padding: "xs", color: "font.secondary", fontSize: "small" }));
+    }
+    return React__namespace["default"].createElement(uiReact.View, { ...props, as: "span" });
+}
+function Table$1(props) {
+    return (React__namespace["default"].createElement(uiReact.Table, { ...props, size: "small", lineHeight: "small", variation: "striped" }));
+}
+function TableBody(props) {
+    return React__namespace["default"].createElement(uiReact.TableBody, { ...props });
+}
+function TableHead(props) {
+    return React__namespace["default"].createElement(uiReact.TableHead, { ...props });
+}
+function TableDataCell(props) {
+    return React__namespace["default"].createElement(uiReact.TableCell, { ...props });
+}
+function TableRow(props) {
+    return React__namespace["default"].createElement(uiReact.TableRow, { ...props });
+}
+function TableHeader(props) {
+    return React__namespace["default"].createElement(uiReact.TableCell, { as: "th", ...props });
+}
+function Text(props) {
+    const { variant } = props;
+    switch (variant) {
+        case 'field-error':
+            return React__namespace["default"].createElement(uiReact.Text, { ...props, color: "font.error", margin: "0" });
+        default:
+            return React__namespace["default"].createElement(uiReact.Text, { ...props });
+    }
+}
+function View({ variant, ...props }) {
+    switch (variant) {
+        case 'menu-list':
+            return (React__namespace["default"].createElement(uiReact.View, { ...props, marginTop: "2px", borderRadius: "medium", boxShadow: "0 1px 3px hsla(210, 50%, 10%, 0.25)", backgroundColor: "background.primary", padding: "small" }));
+        case 'info':
+        case 'warning':
+        case 'success':
+        case 'error':
+            return (React__namespace["default"].createElement(uiReact.Message, { ...props, hasIcon: false, colorTheme: variant },
+                React__namespace["default"].createElement(uiReact.Flex, { gap: "small", alignItems: "center" }, props.children)));
+        case 'empty-message':
+            return (React__namespace["default"].createElement(uiReact.Message, { ...props, colorTheme: "neutral" },
+                React__namespace["default"].createElement(uiReact.Flex, { justifyContent: "center" }, props.children)));
+        default:
+            return React__namespace["default"].createElement(uiReact.View, { ...props });
+    }
+}
+const Nav = (props) => (React__namespace["default"].createElement(uiReact.View, { ...props, as: "nav" }));
+const elementsDefault = {
+    Button,
+    DescriptionTerm,
+    Input,
+    Label,
+    Nav,
+    Heading,
+    Span,
+    Table: Table$1,
+    TableBody,
+    TableDataCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Text,
+    View,
+};
+
+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 = elements.defineBaseElement({
+    type: 'svg',
+    displayName: 'Icon',
+});
+const getIconProps = ({ variant, ...props }) => {
+    const pathData = variant ? internal.STORAGE_BROWSER_ICON_PATHS[variant] : undefined;
+    const children = pathData ? (React__namespace["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 = internal.useIcons('storageBrowser');
+    const icon = variant ? icons?.[variant] : undefined;
+    if (icon) {
+        return React__namespace["default"].createElement(React__namespace["default"].Fragment, null, icon);
+    }
+    return React__namespace["default"].createElement(BaseIconElement, { ...getIconProps(props) });
+};
+
+const DescriptionListElement = elements.defineBaseElement({
+    type: 'dl',
+    displayName: 'DescriptionList',
+});
+const DescriptionTermElement = elements.defineBaseElement({
+    type: 'dt',
+    displayName: 'DescriptionTerm',
+});
+const DescriptionDetailsElement = elements.defineBaseElement({
+    type: 'dd',
+    displayName: 'DescriptionDetails',
+});
+const LabelElement = elements.defineBaseElement({
+    type: 'label',
+    displayName: 'Label',
+});
+const NavElement = elements.defineBaseElement({
+    type: 'nav',
+    displayName: 'Nav',
+});
+elements.defineBaseElement({
+    type: 'p',
+    displayName: 'Text',
+});
+const OrderedListElement = elements.defineBaseElement({
+    type: 'ol',
+    displayName: 'OrderedList',
+});
+elements.defineBaseElement({
+    type: 'ul',
+    displayName: 'UnorderedList',
+});
+const ListItemElement = elements.defineBaseElement({
+    type: 'li',
+    displayName: 'ListItem',
+});
+const TableElement = elements.defineBaseElement({
+    type: 'table',
+    displayName: 'Table',
+});
+const TableDataCellElement = elements.defineBaseElement({
+    type: 'td',
+    displayName: 'TableDataCell',
+});
+const TableRowElement = elements.defineBaseElement({
+    type: 'tr',
+    displayName: 'TableRow',
+});
+const TableHeaderElement = elements.defineBaseElement({
+    type: 'th',
+    displayName: 'TableHeader',
+});
+const TableHeadElement = elements.defineBaseElement({
+    type: 'thead',
+    displayName: 'TableHead',
+});
+const TableBodyElement = elements.defineBaseElement({
+    type: 'tbody',
+    displayName: 'TableBody',
+});
+const HeadingElement = elements.defineBaseElement({
+    type: 'h2',
+    displayName: 'Title',
+});
+elements.defineBaseElement({
+    type: 'svg',
+    displayName: 'ProgressBar',
+});
+const InputElement = elements.defineBaseElement({
+    type: 'input',
+    displayName: 'Input',
+});
+const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
+const ViewElement = elements.defineBaseElement({
+    type: 'div',
+    displayName: 'View',
+});
+const SpanElement = elements.defineBaseElement({
+    type: 'span',
+    displayName: 'Span',
+});
+
+const STORAGE_BROWSER_BLOCK_TO_BE_UPDATED = 'storage-browser';
+const STORAGE_BROWSER_BLOCK = 'amplify-storage-browser';
+
+const ActionCancel = ({ onCancel, isDisabled, label, }) => (React__namespace["default"].createElement(ButtonElement, { variant: "cancel", className: `${STORAGE_BROWSER_BLOCK}__cancel`, onClick: onCancel, disabled: isDisabled }, label));
+
+function Separator() {
+    return (React__namespace["default"].createElement(SpanElement, { "aria-hidden": true, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-separator` }, "/"));
+}
+
+const Breadcrumb = ({ isCurrent, name, onNavigate, }) => {
+    const isNavigable = ui.isFunction(onNavigate);
+    return (React__namespace["default"].createElement(ListItemElement, { "aria-current": isCurrent ? 'page' : undefined, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-list-item` },
+        React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+            !isCurrent && isNavigable ? (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-button`, onClick: onNavigate, variant: "navigate" }, name)) : (React__namespace["default"].createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-text`, variant: "navigation-text" }, name)),
+            !isCurrent ? React__namespace["default"].createElement(Separator, null) : null)));
+};
+function BreadcrumbNavigation({ breadcrumbs, role = 'navigation', }) {
+    return (React__namespace["default"].createElement(NavElement, { "aria-label": 'Breadcrumb', className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb`, role: role },
+        React__namespace["default"].createElement(OrderedListElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-list` }, breadcrumbs.map(({ isCurrent, name, onNavigate }, index) => {
+            return (React__namespace["default"].createElement(Breadcrumb, { key: `${index}-breadcrumb-${name}`, isCurrent: isCurrent, name: name, onNavigate: onNavigate }));
+        }))));
+}
+
+const ActionDestination$1 = ({ isNavigable, items, label, }) => {
+    if (!items.length) {
+        return null;
+    }
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__destination` }, isNavigable ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(SpanElement, null, `${label}:`),
+        React__namespace["default"].createElement(BreadcrumbNavigation, { breadcrumbs: items, role: "complementary" }))) : (React__namespace["default"].createElement(DescriptionListElement, { className: `${STORAGE_BROWSER_BLOCK}__description-list`, role: "list" },
+        React__namespace["default"].createElement(DescriptionTermElement, { className: `${STORAGE_BROWSER_BLOCK}__description-term`, role: "term" }, `${label}:`),
+        items.map(({ name }, index) => {
+            return (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: `action-destination-item-${name}-${index}` },
+                React__namespace["default"].createElement(DescriptionDetailsElement, { className: `${STORAGE_BROWSER_BLOCK}__description-details`, role: "definition" },
+                    React__namespace["default"].createElement(SpanElement, { variant: "destination-text" }, name)),
+                index === items.length - 1 ? null : React__namespace["default"].createElement(Separator, null)));
+        })))));
+};
+
+const ActionExit = ({ onExit, isDisabled = false, label, }) => (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK}__exit`, variant: "exit", onClick: onExit, disabled: isDisabled },
+    React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__action-exit-icon`, variant: "exit" }),
+    ' ',
+    label));
+
+const ActionStart = ({ onStart, isDisabled, label, }) => (React__namespace["default"].createElement(ButtonElement, { variant: "primary", className: `${STORAGE_BROWSER_BLOCK}__action-start`, onClick: onStart, disabled: isDisabled }, label));
+
+function MenuItem({ isDisabled, icon, label, onClick, }) {
+    return (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-item`, disabled: isDisabled, role: 'menuitem', onClick: onClick, variant: "menu-item" },
+        icon && (React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-item-icon`, variant: icon })),
+        label));
+}
+function DropdownMenu({ isDisabled = false, items, onItemSelect, }) {
+    const [isOpen, setIsOpen] = React__namespace["default"].useState(false);
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu` },
+        React__namespace["default"].createElement(ButtonElement, { "aria-label": "Menu Toggle", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-toggle`, disabled: isDisabled || !items?.length, "data-testid": "MENU_TOGGLE", onClick: () => {
+                setIsOpen((prev) => !prev);
+            }, variant: "menu-toggle" },
+            React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-toggle-icon`, variant: "vertical-kebab" })),
+        React__namespace["default"].createElement(ViewElement, { "aria-label": "Menu Items", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-list${isOpen
+                ? ` ${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-list--open`
+                : ''}`, "data-testid": "MENU_LIST", role: "menu", variant: "menu-list" }, items
+            .filter(({ isHidden }) => !isHidden)
+            .map(({ icon, id, isDisabled, label }) => {
+            return (React__namespace["default"].createElement(MenuItem, { key: `menu-item-${id}`, isDisabled: isDisabled, icon: icon, label: label, onClick: () => {
+                    setIsOpen(false);
+                    onItemSelect?.(id);
+                } }));
+        }))));
+}
+
+const ActionsList$1 = ({ isDisabled, items, onActionSelect, }) => {
+    return (React__namespace["default"].createElement(DropdownMenu, { isDisabled: isDisabled, items: items.map((item) => ({ ...item, id: item.actionType })), onItemSelect: onActionSelect }));
+};
+
+const AddFiles = ({ onAddFiles, isDisabled, label, }) => (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__add-files`, disabled: isDisabled, onClick: onAddFiles, variant: "add-files" }, label));
+
+const AddFolder = ({ onAddFolder, isDisabled, label, }) => (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__add-folder`, disabled: isDisabled, onClick: onAddFolder, variant: "add-folder" }, label));
+
+const DataRefresh$1 = ({ onRefresh, isDisabled = false, }) => (React__namespace["default"].createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__data-refresh`, "aria-label": "Refresh data", variant: "refresh", onClick: onRefresh, disabled: isDisabled },
+    React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__data-refresh-icon`, variant: "refresh" })));
+
+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 }) => {
+            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));
+        })))))));
+};
+
+const SortHeader = ({ content }) => {
+    const { label, sortDirection, onSort } = content;
+    return (React__namespace["default"].createElement(ButtonElement, { variant: "sort", className: `${STORAGE_BROWSER_BLOCK}__table-sort-header`, onClick: onSort },
+        label,
+        React__namespace["default"].createElement(IconElement, { variant: `sort-${sortDirection ?? 'indeterminate'}` })));
+};
+
+const TextHeader = ({ content }) => {
+    const { text } = content;
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__table-text-header` }, text));
+};
+
+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__namespace["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__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__table-button-data-cell-icon--${icon}`, variant: icon })),
+        label));
+};
+
+const DateDataCell = ({ content, }) => {
+    const { value, displayValue } = content;
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-date-data-cell` }, displayValue ?? value?.toLocaleString()));
+};
+
+const NumberDataCell = ({ content, }) => {
+    const { displayValue, value } = content;
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-number-data-cell` }, displayValue ?? value));
+};
+
+const CheckboxDataCell = ({ content, }) => {
+    const { checked = false, label, onSelect, id } = content;
+    return (React__namespace["default"].createElement(uiReact.Checkbox, { name: label ?? '', checked: checked, labelHidden: true, label: label, onChange: onSelect, id: id }));
+};
+
+const TextDataCell = ({ content, }) => {
+    const { icon, text } = content;
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell` },
+        icon && (React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell-icon ${STORAGE_BROWSER_BLOCK}__table-text-data-cell-icon--${icon}`, variant: icon })),
+        React__namespace["default"].createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK}__table-text-data-cell-text`, title: text }, text)));
+};
+
+const CheckboxHeader = ({ content, }) => {
+    const { checked = false, label, onSelect, id } = content;
+    return (React__namespace["default"].createElement(uiReact.Checkbox, { name: label ?? '', checked: checked, labelHidden: true, label: label, onChange: onSelect, id: id }));
+};
+
+const DataTable = ({ headers, rows, }) => {
+    const mappedHeaders = headers.map(({ key, content, type }) => {
+        switch (type) {
+            case 'checkbox': {
+                return {
+                    key,
+                    content: React__namespace["default"].createElement(CheckboxHeader, { content: content }),
+                };
+            }
+            case 'sort': {
+                return {
+                    key,
+                    content: React__namespace["default"].createElement(SortHeader, { content: content }),
+                };
+            }
+            case 'text':
+            default: {
+                return {
+                    key,
+                    content: React__namespace["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__namespace["default"].createElement(ButtonDataCell, { content: content }),
+                    };
+                }
+                case 'checkbox': {
+                    return {
+                        key,
+                        content: React__namespace["default"].createElement(CheckboxDataCell, { content: content }),
+                    };
+                }
+                case 'date': {
+                    return {
+                        key,
+                        content: React__namespace["default"].createElement(DateDataCell, { content: content }),
+                    };
+                }
+                case 'number': {
+                    return {
+                        key,
+                        content: React__namespace["default"].createElement(NumberDataCell, { content: content }),
+                    };
+                }
+                case 'text':
+                default: {
+                    return {
+                        key,
+                        content: React__namespace["default"].createElement(TextDataCell, { content: content }),
+                    };
+                }
+            }
+        }),
+    }));
+    return React__namespace["default"].createElement(Table, { headers: mappedHeaders, rows: mappedRows });
+};
+
+const DropZone = ({ children, onDropFiles, }) => {
+    const { dragState, ...dropHandlers } = uiReactCore.useDropZone({
+        onDropComplete: ({ acceptedFiles }) => {
+            onDropFiles?.(acceptedFiles);
+        },
+    });
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__drop-zone ${STORAGE_BROWSER_BLOCK}__drop-zone${dragState !== 'inactive' ? '--active' : ''}`, ...dropHandlers }, children));
+};
+
+function Field({ 'aria-describedby': ariaDescribedBy = 'fieldError', className = `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__field`, children, label, icon = null, id, ...props }) {
+    return (React__namespace["default"].createElement(ViewElement, { className: className },
+        icon,
+        label ? (React__namespace["default"].createElement(LabelElement, { className: `${className}__label`, htmlFor: id }, label)) : null,
+        React__namespace["default"].createElement(InputElement, { ...props, "aria-describedby": ariaDescribedBy, className: `${className}-input`, id: id, type: 'text' }),
+        children));
+}
+
+function FolderNameField$1({ id, isDisabled, label, onChange, onValidate, placeholder, validationMessage, }) {
+    const handleValidate = ({ target: { value }, }) => {
+        onValidate?.(value);
+    };
+    return (React__namespace["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));
+}
+
+function LoadingIndicator$1({ label, isLoading, }) {
+    return !isLoading ? null : (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator` },
+        React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator-icon`, variant: "loading" }),
+        React__namespace["default"].createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__loading-indicator-label`, "aria-live": "polite" }, label)));
+}
+
+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__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message`, role: "alert", variant: type },
+        React__namespace["default"].createElement(IconElement, { variant: type, "aria-label": ariaLabel }),
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message-content` }, content),
+        !onDismiss ? null : (React__namespace["default"].createElement(ButtonElement, { onClick: () => onDismiss(id), className: `${STORAGE_BROWSER_BLOCK}__message-dismiss`, variant: "message-dismiss", "aria-label": "Dismiss message", role: "button" },
+            React__namespace["default"].createElement(IconElement, { variant: "dismiss", className: `${STORAGE_BROWSER_BLOCK}__message-dismiss-icon` })))));
+};
+
+const Navigation$1 = ({ items, }) => {
+    if (!items.length) {
+        return null;
+    }
+    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)));
+
+function PaginationButton({ isDisabled, onClick, type, }) {
+    if (!type)
+        return null;
+    const buttonType = `paginate-${type}`;
+    return (React__namespace["default"].createElement(ButtonElement, { "aria-label": `Go to ${type} page`, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-button--${buttonType}`, disabled: isDisabled, onClick: onClick, variant: buttonType },
+        React__namespace["default"].createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-button-icon`, variant: buttonType })));
+}
+
+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 Description = ({ term, details }) => {
+    return (React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__description` },
+        React__namespace["default"].createElement(DescriptionTermElement, { className: `${STORAGE_BROWSER_BLOCK}__description-term`, role: "term" }, term),
+        React__namespace["default"].createElement(DescriptionDetailsElement, { className: `${STORAGE_BROWSER_BLOCK}__description-details`, role: "definition" }, details)));
+};
+const DescriptionList = ({ descriptions, className = '', }) => {
+    return (React__namespace["default"].createElement(DescriptionListElement, { className: `${STORAGE_BROWSER_BLOCK}__description-list ${className}`, role: "list" }, descriptions.map(({ term, details }, index) => (React__namespace["default"].createElement(Description, { term: term, details: details, key: `${index}-description-${term}` })))));
+};
+
+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, elements: elements$1 } = props;
+    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
+        React__namespace["default"].createElement(ComposablesProvider, { composables: composables }, children)));
+}
+
+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;
+    }
+}
+
+function assertLocationPermissions(value, message) {
+    if (!Array.isArray(value) ||
+        value.some((inputPermissionEntry) => typeof inputPermissionEntry !== 'string' ||
+            !['list', 'get', 'write', 'delete'].includes(inputPermissionEntry))) {
+        throw new Error(message);
+    }
+}
+function assertLocationData(value, message = 'Invalid value provided as `location`.') {
+    const locationStringDataKeys = ['bucket', 'id', 'prefix', 'type'];
+    if (!ui.isObject(value) ||
+        locationStringDataKeys.some((key) => !ui.isString(value[key]))) {
+        throw new Error(message);
+    }
+    assertLocationPermissions(value?.permissions, message);
+}
+function assertPrefix(value, message) {
+    if (!ui.isString(value)) {
+        throw new Error(message ?? 'Invalid value provided as `prefix`.');
+    }
+}
+
+function assertRegisterAuthListener(value) {
+    if (!ui.isFunction(value)) {
+        throw new Error('StorageBrowser: `registerAuthListener` must be a function.');
+    }
+}
+
+function assertAccountId(value) {
+    if (!value) {
+        throw new Error('Storage Browser: Must provide accountId to `listCallerAccessGrants`.');
+    }
+}
+
+const UPLOAD_FILE_SIZE_LIMIT = 160 * 1000 * 1000 * 1000;
+const isFileTooBig = (file) => file.size > UPLOAD_FILE_SIZE_LIMIT;
+
+const ERROR_MESSAGE$3 = 'Invalid `location` value provided as initial value to `LocationProvider.';
+const DEFAULT_STATE$1 = {
+    current: undefined,
+    path: '',
+    key: '',
+};
+function handleAction$1(state, action) {
+    switch (action.type) {
+        case 'NAVIGATE': {
+            const { location, path = '' } = action;
+            if (state.current?.id === location.id && state.path === path) {
+                return state;
+            }
+            return {
+                current: location,
+                path,
+                key: `${location.prefix ?? ''}${path}`,
+            };
+        }
+        case 'RESET_LOCATION': {
+            return DEFAULT_STATE$1;
+        }
+    }
+}
+const defaultValue$8 = [DEFAULT_STATE$1, ui.noop];
+const { LocationContext, useLocation } = uiReactCore.createContextUtilities({
+    contextName: 'Location',
+    defaultValue: defaultValue$8,
+});
+function LocationProvider({ children, location, path = '', }) {
+    if (location) {
+        assertLocationData(location, ERROR_MESSAGE$3);
+    }
+    const value = React__namespace["default"].useReducer(handleAction$1, location
+        ? {
+            current: location,
+            path,
+            key: `${location.prefix ?? ''}${path}`,
+        }
+        : DEFAULT_STATE$1);
+    return (React__namespace["default"].createElement(LocationContext.Provider, { value: value }, children));
+}
+
+const compareFileItems = (prev, next) => prev.key.localeCompare(next.key);
+const resolveFiles = (prevItems, files) => {
+    if (!files?.length)
+        return prevItems;
+    // construct `nextItems` and filter out existing `file` entries
+    const nextItems = files.reduce((items, file) => {
+        const { name, webkitRelativePath } = file;
+        return prevItems.some(({ file: existing }) => existing.name === name &&
+            existing.webkitRelativePath === webkitRelativePath)
+            ? items
+            : items.concat({
+                key: ui.isEmpty(webkitRelativePath) ? name : webkitRelativePath,
+                id: crypto.randomUUID(),
+                file,
+            });
+    }, []);
+    if (!nextItems.length)
+        return prevItems;
+    if (!prevItems.length) {
+        return nextItems.sort(compareFileItems);
+    }
+    return prevItems.concat(nextItems).sort(compareFileItems);
+};
+const filesReducer = (prevItems, input) => {
+    switch (input.type) {
+        case 'ADD_FILE_ITEMS': {
+            return resolveFiles(prevItems, input.files);
+        }
+        case 'REMOVE_FILE_ITEM': {
+            const filteredItems = prevItems.filter(({ id }) => id !== input.id);
+            return filteredItems.length === prevItems.length
+                ? prevItems
+                : filteredItems;
+        }
+        case 'RESET_FILE_ITEMS': {
+            return [];
+        }
+        // TODO: clear message
+    }
+};
+const parseFileSelectParams = (value) => {
+    if (ui.isUndefined(value))
+        return ['FILE', undefined];
+    if (ui.isString(value))
+        return [value, undefined];
+    const [selectType, ...rest] = value;
+    return [selectType, !rest?.length ? undefined : { accept: rest.join() }];
+};
+
+const defaultValue$7 = [undefined, ui.noop];
+const { FilesContext, useFiles } = uiReactCore.createContextUtilities({
+    contextName: 'Files',
+    defaultValue: defaultValue$7,
+});
+function FilesProvider({ children, }) {
+    const [items, dispatch] = React__namespace["default"].useReducer(filesReducer, []);
+    const [fileInput, handleFileSelect] = internal.useFileSelect((nextFiles) => {
+        dispatch({ type: 'ADD_FILE_ITEMS', files: nextFiles });
+    });
+    const handleFilesAction = React__namespace["default"].useCallback((action) => {
+        if (action.type === 'SELECT_FILES') {
+            handleFileSelect(...parseFileSelectParams(action.selectionType));
+        }
+        else {
+            dispatch(action);
+        }
+    }, [handleFileSelect]);
+    const value = React__namespace["default"].useMemo(() => [items, handleFilesAction], [items, handleFilesAction]);
+    return (React__namespace["default"].createElement(FilesContext.Provider, { value: value },
+        fileInput,
+        children));
+}
+
+const handleAction = (event) => {
+    switch (event.type) {
+        case 'SET_ACTION_TYPE': {
+            return event.actionType;
+        }
+        case 'RESET_ACTION_TYPE': {
+            return undefined;
+        }
+    }
+};
+function useActionTypeState(initialState) {
+    const [actionType, setActionType] = React__namespace["default"].useState(initialState);
+    const handler = React__namespace["default"].useCallback((action) => setActionType(handleAction(action)), []);
+    return [actionType, handler];
+}
+
+const defaultValue$6 = [undefined, ui.noop];
+const { ActionTypeContext, useActionType } = uiReactCore.createContextUtilities({
+    contextName: 'ActionType',
+    defaultValue: defaultValue$6,
+});
+function ActionTypeProvider({ actionType, children, }) {
+    const value = useActionTypeState(actionType);
+    return (React__namespace["default"].createElement(ActionTypeContext.Provider, { value: value }, children));
+}
+
+const defaultValue$5 = { actions: undefined };
+const { useActionConfigs, ActionConfigsProvider } = uiReactCore.createContextUtilities({ contextName: 'ActionConfigs', defaultValue: defaultValue$5 });
+function useActionConfig(type) {
+    const { actions } = useActionConfigs();
+    const config = actions?.[type];
+    if (!config)
+        throw new Error('No action!');
+    return config;
+}
+
+const constructBucket = ({ bucket: bucketName, region, }) => ({ bucketName, region });
+const parseAccessGrantLocation = (location) => {
+    const { permission, scope, type } = location;
+    if (!scope.startsWith('s3://')) {
+        throw new Error(`Invalid scope: ${scope}`);
+    }
+    const id = crypto.randomUUID();
+    // remove default path
+    const slicedScope = scope.slice(5);
+    let bucket, prefix;
+    switch (type) {
+        case 'BUCKET': {
+            // { scope: 's3://bucket/*', type: 'BUCKET', },
+            bucket = slicedScope.slice(0, -2);
+            prefix = '';
+            break;
+        }
+        case 'PREFIX': {
+            // { scope: 's3://bucket/path/*', type: 'PREFIX', },
+            bucket = slicedScope.slice(0, slicedScope.indexOf('/'));
+            prefix = `${slicedScope.slice(bucket.length + 1, -1)}`;
+            break;
+        }
+        case 'OBJECT': {
+            // { scope: 's3://bucket/path/to/object', type: 'OBJECT', },
+            bucket = slicedScope.slice(0, slicedScope.indexOf('/'));
+            prefix = slicedScope.slice(bucket.length + 1);
+            break;
+        }
+        default: {
+            throw new Error(`Invalid location type: ${type}`);
+        }
+    }
+    let permissions;
+    switch (permission) {
+        case 'READ':
+            permissions = ['get', 'list'];
+            break;
+        case 'READWRITE':
+            permissions = ['delete', 'get', 'list', 'write'];
+            break;
+        case 'WRITE':
+            permissions = ['delete', 'write'];
+            break;
+        default:
+            throw new Error(`Invalid location permission: ${permission}`);
+    }
+    return { bucket, id, permissions: permissions, prefix, type };
+};
+const isSamePermissions = (permissionsToExclude, locationPermissions) => {
+    if (permissionsToExclude.length !== locationPermissions.length) {
+        return false;
+    }
+    const sortedLocationPermissions = locationPermissions.sort();
+    return permissionsToExclude
+        .sort()
+        .every((permission, index) => permission === sortedLocationPermissions[index]);
+};
+const isSameType = (typeToExclude, locationType) => typeof typeToExclude === 'string'
+    ? typeToExclude === locationType
+    : typeToExclude.includes(locationType);
+const shouldExcludeLocation = ({ permissions, type }, exclude) => {
+    const excludedByPermssions = !!(exclude?.exactPermissions &&
+        isSamePermissions(exclude.exactPermissions, permissions));
+    const excludedByType = !!(exclude?.type && isSameType(exclude.type, type));
+    return excludedByPermssions || excludedByType;
+};
+const getFilteredLocations = (locations, exclude) => locations.reduce((filteredLocations, location) => {
+    const parsedLocation = parseAccessGrantLocation(location);
+    const isNonFolderLikePrefix = !parsedLocation.prefix.endsWith('/') &&
+        parsedLocation.type === 'PREFIX';
+    if (isNonFolderLikePrefix) {
+        return filteredLocations;
+    }
+    if (!shouldExcludeLocation(parsedLocation, exclude)) {
+        filteredLocations.push(parsedLocation);
+    }
+    return filteredLocations;
+}, []);
+const getFileKey = (key) => key.slice(key.lastIndexOf('/') + 1, key.length);
+const createFileDataItem = (data) => ({
+    ...data,
+    fileKey: getFileKey(data.key),
+});
+const createFileDataItemFromLocation = (data) => ({
+    id: data.id,
+    type: 'FILE',
+    key: data.prefix,
+    fileKey: getFileKey(data.prefix),
+    // `lastModified` and `size` included to satisfy
+    // expected shape of `FileDataItem`
+    lastModified: new Date(),
+    size: 0,
+});
+const isFileItem = (value) => !!value.file;
+const isFileDataItem = (item) => !!item.fileKey;
+const getProgress = ({ totalBytes, transferredBytes, }) => totalBytes ? transferredBytes / totalBytes : undefined;
+
+const copyHandler = (input) => {
+    const { config, destinationPrefix: path, data } = input;
+    const { accountId: expectedBucketOwner, credentials, customEndpoint, } = config;
+    const { key: sourcePath, fileKey, lastModified, eTag } = data;
+    const bucket = constructBucket(config);
+    const destinationPath = `${path}${fileKey}`;
+    const source = {
+        bucket,
+        expectedBucketOwner,
+        /**
+         * Per S3 requirement, copy source must the URI encoded.
+         * This is NOT added to Amplify JS v6 because it will be a breaking
+         * change to suddenly introduce URI encode to copy API source.
+         *
+         * see: https://docs.aws.amazon.com/AmazonS3/latest/API/API_CopyObject.html#API_CopyObject_RequestSyntax
+         */
+        path: sourcePath.split('/').map(encodeURIComponent).join('/'),
+        notModifiedSince: lastModified,
+        eTag,
+    };
+    const destination = {
+        bucket,
+        expectedBucketOwner,
+        path: destinationPath,
+    };
+    const result = internals.copy({
+        source,
+        destination,
+        options: { locationCredentialsProvider: credentials, customEndpoint },
+    });
+    return {
+        result: result
+            .then(() => ({ status: 'COMPLETE' }))
+            .catch(({ message }) => ({ message, status: 'FAILED' })),
+    };
+};
+
+const createFolderHandler = (input) => {
+    const { destinationPrefix, config, data, options } = input;
+    const { accountId, credentials, customEndpoint } = config;
+    const { onProgress, preventOverwrite } = options ?? {};
+    const { key } = data;
+    const bucket = constructBucket(config);
+    const { result } = internals.uploadData({
+        path: `${destinationPrefix}${key}`,
+        data: '',
+        options: {
+            bucket,
+            expectedBucketOwner: accountId,
+            locationCredentialsProvider: credentials,
+            customEndpoint,
+            onProgress: (event) => {
+                if (ui.isFunction(onProgress))
+                    onProgress(data, getProgress(event));
+            },
+            preventOverwrite,
+        },
+    });
+    return {
+        result: result
+            .then(() => ({ status: 'COMPLETE' }))
+            .catch(({ message, name }) => {
+            if (name === 'PreconditionFailed') {
+                return { message, status: 'OVERWRITE_PREVENTED' };
+            }
+            return { message, status: 'FAILED' };
+        }),
+    };
+};
+
+const deleteHandler = ({ config, data: { key }, }) => {
+    const { accountId, credentials, customEndpoint } = config;
+    const result = internals.remove({
+        path: key,
+        options: {
+            bucket: constructBucket(config),
+            locationCredentialsProvider: credentials,
+            expectedBucketOwner: accountId,
+            customEndpoint,
+        },
+    });
+    return {
+        result: result
+            .then(() => ({ status: 'COMPLETE' }))
+            .catch(({ message }) => ({ message, status: 'FAILED' })),
+    };
+};
+
+function downloadFromUrl(fileName, url) {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    a.target = '_blank';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+const downloadHandler = ({ config, data: { key }, }) => {
+    const { accountId, credentials, customEndpoint } = config;
+    const result = internals.getUrl({
+        path: key,
+        options: {
+            bucket: constructBucket(config),
+            customEndpoint,
+            locationCredentialsProvider: credentials,
+            validateObjectExistence: true,
+            contentDisposition: 'attachment',
+            expectedBucketOwner: accountId,
+        },
+    }).then((result) => {
+        return result;
+    });
+    return {
+        result: result
+            .then(({ url }) => {
+            downloadFromUrl(key, url.toString());
+            return { status: 'COMPLETE' };
+        })
+            .catch(({ message }) => ({ message, status: 'FAILED' })),
+    };
+};
+
+const DEFAULT_PAGE_SIZE$4 = 1000;
+const parseItems = (items, excludedPath) => items
+    // remove root `key` from results
+    .filter(({ path }) => path !== excludedPath)
+    .map(({ path: key, lastModified, size, eTag }) => {
+    const id = crypto.randomUUID();
+    // Mark zero byte files as Folders
+    if (size === 0 && key.endsWith('/')) {
+        return { key, id, type: 'FOLDER' };
+    }
+    return {
+        key,
+        id,
+        eTag,
+        lastModified: lastModified,
+        size: size,
+        type: 'FILE',
+    };
+});
+const parseExcludedPaths = (paths) => paths?.map((key) => ({ key, id: crypto.randomUUID(), type: 'FOLDER' })) ?? [];
+const filterDotItems = (items, prefix) => items.filter((item) => {
+    const key = (item.key.startsWith(prefix) ? item.key.substring(prefix.length) : item.key).trim();
+    // matches object keys that would cause problems either as folder names in navigation (`/`, `./`, `../`) or as objects (`.`, `..`)
+    return !(key === '/' ||
+        key === './' ||
+        key === '../' ||
+        key === '.' ||
+        key === '..');
+});
+const parseResult = ({ excludedSubpaths, items }, prefix) => filterDotItems([...parseExcludedPaths(excludedSubpaths), ...parseItems(items, prefix)], prefix);
+const listLocationItemsHandler = async (input) => {
+    const { config, prefix, options } = input;
+    const { bucket: _bucket, credentials, customEndpoint, region, accountId, } = config;
+    const { exclude, delimiter, nextToken, pageSize: _pageSize = DEFAULT_PAGE_SIZE$4, ..._options } = options ?? {};
+    const bucket = { bucketName: _bucket, region };
+    const subpathStrategy = {
+        delimiter,
+        strategy: delimiter ? 'exclude' : 'include',
+    };
+    // `ListObjectsV2` returns the root `key` on initial request, which is from
+    // filtered from `results` by `parseResult`, creatimg a scenario where the
+    // return count of `results` to be one item less than provided the `pageSize`.
+    // To mitigate, if a `pageSize` is provided and there are no previous `results`
+    // or `refresh` is `true` increment the provided `pageSize` by `1`
+    const hasOffset = !nextToken;
+    const pageSize = hasOffset ? _pageSize + 1 : _pageSize;
+    const result = [];
+    let nextNextToken = nextToken;
+    do {
+        const listInput = {
+            path: prefix,
+            options: {
+                nextToken: nextNextToken,
+                ..._options,
+                bucket,
+                customEndpoint,
+                expectedBucketOwner: accountId,
+                locationCredentialsProvider: credentials,
+                pageSize,
+                subpathStrategy,
+            },
+        };
+        const output = await internals.list(listInput);
+        nextNextToken = output.nextToken;
+        const items = parseResult(output, prefix);
+        result.push(...(exclude ? items.filter((item) => item.type !== exclude) : items));
+    } while (nextNextToken && result.length < pageSize);
+    return { items: result, nextToken: nextNextToken };
+};
+
+const DEFAULT_PAGE_SIZE$3 = 1000;
+const listLocationsHandler = async (input) => {
+    const { config, options } = input;
+    const { accountId, credentials, customEndpoint, region } = config;
+    const { exclude, nextToken, pageSize = DEFAULT_PAGE_SIZE$3 } = options ?? {};
+    const fetchLocations = async (accumulatedItems, locationsNextToken) => {
+        const remainingPageSize = pageSize - accumulatedItems.length;
+        assertAccountId(accountId);
+        const output = await internals.listCallerAccessGrants({
+            accountId,
+            credentialsProvider: credentials,
+            customEndpoint,
+            nextToken: locationsNextToken,
+            pageSize: remainingPageSize,
+            region,
+        });
+        const parsedOutput = getFilteredLocations(output.locations, exclude);
+        const items = [...accumulatedItems, ...parsedOutput];
+        if (output.nextToken && items.length < pageSize) {
+            return fetchLocations(items, output.nextToken);
+        }
+        return { items, nextToken: output.nextToken };
+    };
+    return fetchLocations([], nextToken);
+};
+
+// 5MB for multipart upload
+// https://github.com/aws-amplify/amplify-js/blob/1a5366d113c9af4ce994168653df3aadb142c581/packages/storage/src/providers/s3/utils/constants.ts#L16
+const MULTIPART_UPLOAD_THRESHOLD_BYTES = 5 * 1024 * 1024;
+const UNDEFINED_CALLBACKS = {
+    cancel: undefined,
+    pause: undefined,
+    resume: undefined,
+};
+const uploadHandler = ({ config, data, destinationPrefix, options, }) => {
+    const { accountId, credentials, customEndpoint } = config;
+    const { key, file } = data;
+    const { onProgress, preventOverwrite } = options ?? {};
+    const input = {
+        path: `${destinationPrefix}${key}`,
+        data: file,
+        options: {
+            bucket: constructBucket(config),
+            expectedBucketOwner: accountId,
+            locationCredentialsProvider: credentials,
+            onProgress: (event) => {
+                if (ui.isFunction(onProgress))
+                    onProgress(data, getProgress(event));
+            },
+            preventOverwrite,
+            customEndpoint,
+            checksumAlgorithm: 'crc-32',
+        },
+    };
+    const { cancel, pause, resume, result } = internals.uploadData(input);
+    return {
+        ...(file.size > MULTIPART_UPLOAD_THRESHOLD_BYTES
+            ? { cancel, pause, resume }
+            : UNDEFINED_CALLBACKS),
+        result: result
+            .then(() => ({ status: 'COMPLETE' }))
+            .catch((error) => {
+            const { message } = error;
+            if (error.name === 'PreconditionFailed') {
+                return { message, status: 'OVERWRITE_PREVENTED' };
+            }
+            return {
+                message,
+                status: storage.isCancelError(error) ? 'CANCELED' : 'FAILED',
+            };
+        }),
+    };
+};
+
+const copyActionConfig = {
+    componentName: 'CopyView',
+    actionsListItemConfig: {
+        disable: (selected) => !selected || selected.length === 0,
+        hide: (permissions) => !permissions.includes('write'),
+        icon: 'copy-file',
+        label: 'Copy',
+    },
+    displayName: 'Copy',
+    handler: copyHandler,
+};
+const deleteActionConfig = {
+    componentName: 'DeleteView',
+    actionsListItemConfig: {
+        disable: (selected) => !selected || selected.length === 0,
+        hide: (permissions) => !permissions.includes('delete'),
+        icon: 'delete-file',
+        label: 'Delete',
+    },
+    displayName: 'Delete',
+    handler: deleteHandler,
+};
+const createFolderActionConfig = {
+    componentName: 'CreateFolderView',
+    actionsListItemConfig: {
+        disable: () => false,
+        hide: (permissions) => !permissions.includes('write'),
+        icon: 'create-folder',
+        label: 'Create folder',
+    },
+    handler: createFolderHandler,
+    isCancelable: false,
+    displayName: 'Create Folder',
+};
+const listLocationItemsActionConfig = {
+    componentName: 'LocationDetailView',
+    handler: listLocationItemsHandler,
+    displayName: (bucket, prefix) => {
+        if (bucket && prefix) {
+            const prefixes = prefix.split('/');
+            return `${bucket}: ${prefixes.length > 2 ? `../${prefixes[prefixes.length - 2]}/` : prefix}`;
+        }
+        return !bucket ? '-' : bucket;
+    },
+};
+const listLocationsActionConfig = {
+    componentName: 'LocationsView',
+    handler: listLocationsHandler,
+    displayName: 'Home',
+};
+const uploadActionConfig = {
+    componentName: 'UploadView',
+    actionsListItemConfig: {
+        disable: () => false,
+        fileSelection: 'FILE',
+        hide: (permissions) => !permissions.includes('write'),
+        icon: 'upload-file',
+        label: 'Upload',
+    },
+    isCancelable: true,
+    includeProgress: true,
+    handler: uploadHandler,
+    displayName: 'Upload',
+};
+const defaultActionViewConfigs = {
+    copy: copyActionConfig,
+    createFolder: createFolderActionConfig,
+    delete: deleteActionConfig,
+    upload: uploadActionConfig,
+};
+const DEFAULT_ACTION_VIEW_TYPES = Object.keys(defaultActionViewConfigs);
+const isDefaultActionViewType = (value) => DEFAULT_ACTION_VIEW_TYPES.some((type) => type === value);
+const defaultActionConfigs = {
+    ...defaultActionViewConfigs,
+    listLocationItems: listLocationItemsActionConfig,
+    listLocations: listLocationsActionConfig,
+};
+
+const SEARCH_LIMIT = 10000;
+const SEARCH_PAGE_SIZE = 1000;
+/**
+ * Normalizes and converts a string to lower case,
+ * handling Unicode characters and locale-specific case mappings.
+ * Uses NFKD to fully decompose unicode: https://unicode.org/reports/tr15/#Normalization_Forms_Table
+ */
+function normalize(input) {
+    return input
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '') // remove diacritic modifiers
+        .toLocaleLowerCase();
+}
+/**
+ * Performs a case-insensitive check to determine if a string includes another string,
+ * handling Unicode characters and locale-specific case mappings.
+ *
+ * @param {string} input - The string to search within.
+ * @param {string} query - The substring to search for.
+ * @returns {boolean} - Returns `true` if `query` is found in `input` (case-insensitively), otherwise `false`.
+ *
+ * @example
+ * caseInsensitiveIncludes("Photos", "photo"); // true
+ * caseInsensitiveIncludes("Hello", "HELLO");   // true
+ * caseInsensitiveIncludes("\uFB00", "\u0046\u0046");   // ff = FF true
+ * caseInsensitiveIncludes("Cafè", "cafe");   // true
+ */
+function caseInsensitiveIncludes(input, query) {
+    return normalize(input).includes(normalize(query));
+}
+function searchItems({ prefix = '', list, options }) {
+    const { query, filterBy, groupBy } = options;
+    // filter keys that match `filterBy` search option
+    const filteredItems = list.filter((item) => {
+        const key = typeof filterBy === 'function' ? filterBy(item) : filterBy;
+        const path = item[key];
+        const suffix = path.slice(prefix.length);
+        return caseInsensitiveIncludes(suffix, query);
+    });
+    if (!groupBy) {
+        return filteredItems;
+    }
+    // group items using the provided grouping delimiter
+    const uniquePaths = new Map();
+    for (const item of filteredItems) {
+        const key = typeof filterBy === 'function' ? filterBy(item) : filterBy;
+        const path = item[key];
+        const components = path.split(groupBy);
+        for (const [i, component] of components.entries()) {
+            if (!caseInsensitiveIncludes(component, query)) {
+                continue;
+            }
+            // list of components ending with match
+            const matchedPathSegments = components.slice(0, i + 1);
+            // create new path
+            let matchedPath = matchedPathSegments.join(groupBy);
+            const isFolder = matchedPath !== path;
+            if (isFolder) {
+                matchedPath += groupBy;
+            }
+            // ignore anything below the prefix for matching
+            if (matchedPath.length > prefix.length && !uniquePaths.has(matchedPath)) {
+                // add a new item
+                uniquePaths.set(matchedPath, {
+                    ...item,
+                    id: crypto.randomUUID(),
+                    [key]: matchedPath,
+                    type: isFolder ? 'FOLDER' : 'FILE',
+                });
+            }
+        }
+    }
+    return Array.from(uniquePaths.values());
+}
+const createEnhancedListHandler = (action) => {
+    return async function listActionHandler(prevState, { options, ...input }) {
+        const { nextToken: _nextToken, refresh, reset, search, ...rest } = options ?? {};
+        if (reset) {
+            return { items: [], nextToken: undefined };
+        }
+        // collect and filter results on `search`
+        if (search) {
+            const result = [];
+            let nextNextToken = undefined;
+            do {
+                const output = (await action({
+                    ...input,
+                    options: {
+                        ...rest,
+                        pageSize: SEARCH_PAGE_SIZE,
+                        nextToken: nextNextToken,
+                    },
+                }));
+                result.push(...output.items);
+                nextNextToken = output.nextToken;
+            } while (nextNextToken && result.length < SEARCH_LIMIT);
+            return {
+                items: searchItems({
+                    list: result,
+                    prefix: input.prefix,
+                    options: search,
+                }),
+                search: {
+                    // search limit reached but we still have a next token
+                    hasExhaustedSearch: !!nextNextToken,
+                },
+                nextToken: undefined,
+            };
+        }
+        // ignore provided `nextToken` on `refresh`
+        const nextToken = refresh ? undefined : _nextToken;
+        const output = (await action({
+            ...input,
+            options: { ...rest, nextToken },
+        }));
+        return {
+            items: [...(refresh ? [] : prevState.items), ...output.items],
+            nextToken: output.nextToken,
+        };
+    };
+};
+
+const useListLocations = () => {
+    const { handler } = useActionConfig('listLocations');
+    const enhancedHandler = React__namespace["default"].useMemo(() => createEnhancedListHandler(handler), [handler]);
+    return uiReactCore.useDataState(enhancedHandler, {
+        items: [],
+        nextToken: undefined,
+    });
+};
+
+const DEFAULT_STATE = {
+    fileDataItems: undefined,
+};
+const locationItemsReducer = (prevState, event) => {
+    switch (event.type) {
+        case 'SET_LOCATION_ITEMS': {
+            const { items } = event;
+            if (!items?.length)
+                return prevState;
+            if (!prevState.fileDataItems?.length) {
+                return { fileDataItems: items.map(createFileDataItem) };
+            }
+            const nextFileDataItems = items?.reduce((fileDataItems, data) => prevState.fileDataItems?.some(({ id }) => id === data.id)
+                ? fileDataItems
+                : fileDataItems.concat(createFileDataItem(data)), []);
+            if (!nextFileDataItems?.length)
+                return prevState;
+            return {
+                fileDataItems: prevState.fileDataItems.concat(nextFileDataItems),
+            };
+        }
+        case 'REMOVE_LOCATION_ITEM': {
+            const { id } = event;
+            if (!prevState.fileDataItems)
+                return prevState;
+            const fileDataItems = prevState.fileDataItems.filter((item) => item.id !== id);
+            if (fileDataItems.length === prevState.fileDataItems.length) {
+                return prevState;
+            }
+            return { fileDataItems };
+        }
+        case 'RESET_LOCATION_ITEMS': {
+            return DEFAULT_STATE;
+        }
+    }
+};
+const defaultValue$4 = [DEFAULT_STATE, ui.noop];
+const { LocationItemsContext, useLocationItems } = uiReactCore.createContextUtilities({ contextName: 'LocationItems', defaultValue: defaultValue$4 });
+function LocationItemsProvider({ children, }) {
+    const value = React__namespace["default"].useReducer(locationItemsReducer, DEFAULT_STATE);
+    return (React__namespace["default"].createElement(LocationItemsContext.Provider, { value: value }, children));
+}
+
+function StoreProvider(props) {
+    const { actionType, children, location, path } = props;
+    return (React__namespace["default"].createElement(FilesProvider, null,
+        React__namespace["default"].createElement(LocationProvider, { location: location, path: path },
+            React__namespace["default"].createElement(LocationItemsProvider, null,
+                React__namespace["default"].createElement(ActionTypeProvider, { actionType: actionType }, children)))));
+}
+
+function useStore() {
+    const [actionType, dispatchActionType] = useActionType();
+    const [files, dispatchFilesAction] = useFiles();
+    const [location, dispatchLocationAction] = useLocation();
+    const [locationItems, dispatchLocationItemsAction] = useLocationItems();
+    const dispatchHandler = React__namespace["default"].useCallback((action) => {
+        switch (action.type) {
+            case 'ADD_FILE_ITEMS':
+            case 'REMOVE_FILE_ITEM':
+            case 'SELECT_FILES':
+            case 'RESET_FILE_ITEMS': {
+                dispatchFilesAction(action);
+                break;
+            }
+            case 'NAVIGATE':
+            case 'RESET_LOCATION': {
+                dispatchLocationAction(action);
+                break;
+            }
+            case 'SET_LOCATION_ITEMS':
+            case 'REMOVE_LOCATION_ITEM':
+            case 'RESET_LOCATION_ITEMS': {
+                dispatchLocationItemsAction(action);
+                break;
+            }
+            case 'SET_ACTION_TYPE':
+            case 'RESET_ACTION_TYPE': {
+                dispatchActionType(action);
+                break;
+            }
+        }
+    }, [
+        dispatchActionType,
+        dispatchFilesAction,
+        dispatchLocationAction,
+        dispatchLocationItemsAction,
+    ]);
+    return [{ actionType, files, location, locationItems }, dispatchHandler];
+}
+
+const CREDENTIALS_STORE_DEFAULT_SIZE = 10;
+const CREDENTIALS_REFRESH_WINDOW_MS = 30000;
+
+const serializedPermissions = (permissions) => permissions.sort().join('_');
+const createCacheKey = (location) => `${location.scope}_${serializedPermissions(location.permissions)}`;
+const pastTTL = (credentials) => {
+    const { expiration } = credentials;
+    return expiration.getTime() - CREDENTIALS_REFRESH_WINDOW_MS <= Date.now();
+};
+const setCacheRecord = (store, key, value) => {
+    if (store.capacity === store.values.size) {
+        // Pop least used entry. The Map's key are in insertion order.
+        // So first key is the last recently inserted.
+        const [oldestKey] = store.values.keys();
+        store.values.delete(oldestKey);
+        // TODO(@AllanZhengYP): Add log info when record is evicted.
+    }
+    // Add latest used value to the cache.
+    store.values.set(key, value);
+};
+const dispatchRefresh = (refreshHandler, value, onRefreshFailure) => {
+    if (value.inflightCredentials) {
+        return value.inflightCredentials;
+    }
+    value.inflightCredentials = (async () => {
+        try {
+            const { credentials } = await refreshHandler({
+                scope: value.scope,
+                permissions: value.permissions,
+            });
+            value.credentials = credentials;
+            return { credentials };
+        }
+        catch (e) {
+            onRefreshFailure();
+            throw e;
+        }
+        finally {
+            value.inflightCredentials = undefined;
+        }
+    })();
+    return value.inflightCredentials;
+};
+/**
+ * @internal
+ */
+const initStore = (refreshHandler, size = CREDENTIALS_STORE_DEFAULT_SIZE) => {
+    internals.assertValidationError(size > 0, internals.StorageValidationErrorCode.InvalidLocationCredentialsCacheSize);
+    return {
+        capacity: size,
+        refreshHandler,
+        values: new Map(),
+    };
+};
+const getCacheValue = (store, location) => {
+    const cacheKey = createCacheKey(location);
+    const cachedValue = store.values.get(cacheKey);
+    const cachedCredentials = cachedValue?.credentials;
+    if (!cachedCredentials) {
+        return null;
+    }
+    // Delete and re-insert to key to map to indicate a latest reference in LRU.
+    store.values.delete(cacheKey);
+    if (!pastTTL(cachedCredentials)) {
+        // TODO(@AllanZhengYP): If the credential is still valid but will expire
+        // soon, we should return credentials AND dispatch a refresh.
+        store.values.set(cacheKey, cachedValue);
+        return cachedCredentials;
+    }
+    return null;
+};
+/**
+ * Fetch new credentials value with refresh handler and cache the result in
+ * LRU cache.
+ * @internal
+ */
+const fetchNewValue = async (store, location) => {
+    const storeValues = store.values;
+    const key = createCacheKey(location);
+    if (!storeValues.has(key)) {
+        const newStoreValue = {
+            scope: location.scope,
+            permissions: location.permissions,
+        };
+        setCacheRecord(store, key, newStoreValue);
+    }
+    const storeValue = storeValues.get(key);
+    return dispatchRefresh(store.refreshHandler, storeValue, () => {
+        store.values.delete(key);
+    });
+};
+
+/**
+ * Keep all cache records for all instances of credentials store in a singleton
+ * so we can reliably de-reference from the memory when we destroy a store
+ * instance.
+ */
+const storeRegistry = new WeakMap();
+/**
+ * @internal
+ */
+const createStore = (refreshHandler, size) => {
+    const storeSymbol = { value: Symbol('LocationCredentialsStore') };
+    storeRegistry.set(storeSymbol, initStore(refreshHandler, size));
+    return storeSymbol;
+};
+const getCredentialsStore = (storeSymbol) => {
+    internals.assertValidationError(storeRegistry.has(storeSymbol), internals.StorageValidationErrorCode.LocationCredentialsStoreDestroyed);
+    return storeRegistry.get(storeSymbol);
+};
+/**
+ * @internal
+ */
+const getValue = async (input) => {
+    const { storeSymbol: storeReference, location, forceRefresh } = input;
+    const store = getCredentialsStore(storeReference);
+    if (!forceRefresh) {
+        const credentials = getCacheValue(store, location);
+        if (credentials !== null) {
+            return { credentials };
+        }
+    }
+    return fetchNewValue(store, location);
+};
+const removeStore = (storeSymbol) => {
+    storeRegistry.delete(storeSymbol);
+};
+
+const validateS3Uri = (uri) => {
+    const s3UrlSchemaRegex = /^s3:\/\/[^/]+/;
+    internals.assertValidationError(s3UrlSchemaRegex.test(uri), internals.StorageValidationErrorCode.InvalidS3Uri);
+};
+const createLocationCredentialsStore = (input) => {
+    const storeSymbol = createStore(input.handler);
+    const store = {
+        getProvider(providerLocation) {
+            const locationCredentialsProvider = async ({ forceRefresh = false, } = {}) => {
+                validateS3Uri(providerLocation.scope);
+                // TODO(@AllanZhengYP): validate the action bucket and paths matches provider scope.
+                return getValue({
+                    storeSymbol,
+                    location: { ...providerLocation },
+                    forceRefresh,
+                });
+            };
+            return locationCredentialsProvider;
+        },
+        destroy() {
+            removeStore(storeSymbol);
+        },
+    };
+    return store;
+};
+
+const createCredentialsStore = ({ ...input }) => {
+    const { destroy, getProvider } = createLocationCredentialsStore(input);
+    return {
+        destroy,
+        getCredentials: ({ scope, permissions }) => getProvider({
+            scope,
+            permissions,
+        }),
+    };
+};
+const isCredentialsStore = (value) => ui.isFunction(value?.getCredentials);
+function useCredentialsStore({ getLocationCredentials: handler, initialValue, onDestroy, registerAuthListener, }) {
+    const hasExistingStore = isCredentialsStore(initialValue);
+    const [store, setStore] = React__namespace["default"].useState(() => hasExistingStore ? initialValue : createCredentialsStore({ handler }));
+    const { destroy } = store;
+    React__namespace["default"].useEffect(() => {
+        if (hasExistingStore) {
+            return;
+        }
+        const handleAuthStatusChange = () => {
+            destroy();
+            if (ui.isFunction(onDestroy)) {
+                onDestroy();
+            }
+            setStore(createCredentialsStore({ handler }));
+        };
+        // provide `handleAuthStatusChange` to consumer
+        registerAuthListener(handleAuthStatusChange);
+    }, [destroy, handler, hasExistingStore, onDestroy, registerAuthListener]);
+    return store;
+}
+
+const ERROR_MESSAGE$2 = '`useCredentials` must be called from within a `CredentialsProvider`.';
+const { useCredentials, CredentialsContext } = uiReactCore.createContextUtilities({
+    contextName: 'Credentials',
+    errorMessage: ERROR_MESSAGE$2,
+});
+function CredentialsProvider({ children, ...props }) {
+    const initialValue = React__namespace["default"].useContext(CredentialsContext);
+    const value = useCredentialsStore({ ...props, initialValue });
+    return (React__namespace["default"].createElement(CredentialsContext.Provider, { value: value }, children));
+}
+
+const getErrorMessage = (propertyName) => `Unable to resolve credentials due to invalid value of '${propertyName}'`;
+function useGetActionInputCallback({ accountId, customEndpoint, region, }) {
+    const { getCredentials } = useCredentials();
+    const [{ location }] = useStore();
+    const { current, key } = location;
+    return React__namespace["default"].useCallback((location) => {
+        // prefer passed in location / prefix over current location in state
+        const _location = location ?? current;
+        // when `location` has been provided as a param, resolve `_prefix` to `location.prefix`.
+        // in the default scenario where `current` is the target `location` use the fully qualified `key`
+        // that includes the default `prefix` and any additional prefixes from navigation
+        const _prefix = location ? location.prefix : key;
+        assertLocationData(_location, getErrorMessage('locationData'));
+        assertPrefix(_prefix, getErrorMessage('prefix'));
+        const { bucket, permissions, type } = _location;
+        // BUCKET/PREFIX grants end with `*`, but object grants do not.
+        const scope = `s3://${bucket}/${_prefix}${type === 'OBJECT' ? '' : '*'}`;
+        return {
+            accountId,
+            bucket,
+            credentials: getCredentials({
+                permissions,
+                scope,
+            }),
+            region,
+            customEndpoint,
+        };
+    }, [accountId, current, customEndpoint, getCredentials, key, region]);
+}
+
+const ERROR_MESSAGE$1 = '`useGetActionInput` must be called from within a `ConfigurationProvider`.';
+const { useGetActionInput, GetActionInputContext } = uiReactCore.createContextUtilities({
+    contextName: 'GetActionInput',
+    errorMessage: ERROR_MESSAGE$1,
+});
+function GetActionInputProvider({ accountId, children, customEndpoint, region, }) {
+    const value = useGetActionInputCallback({
+        accountId,
+        customEndpoint,
+        region,
+    });
+    return (React__namespace["default"].createElement(GetActionInputContext.Provider, { value: value }, children));
+}
+
+const Passthrough = ({ children }) => (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, children));
+function createConfigurationProvider(input) {
+    const { accountId, actions, ChildComponent, displayName, region, customEndpoint, ...rest } = input;
+    const Child = elements.isComponent(ChildComponent) ? ChildComponent : Passthrough;
+    const Provider = (props) => (React__namespace["default"].createElement(ActionConfigsProvider, { actions: actions },
+        React__namespace["default"].createElement(CredentialsProvider, { ...rest },
+            React__namespace["default"].createElement(GetActionInputProvider, { accountId: accountId, region: region, customEndpoint: customEndpoint },
+                React__namespace["default"].createElement(Child, { ...props })))));
+    Provider.displayName = displayName;
+    return Provider;
+}
+
+const defaultValue$3 = { data: {} };
+const { useControlsContext, ControlsContextProvider } = uiReactCore.createContextUtilities({
+    contextName: 'ControlsContext',
+    defaultValue: defaultValue$3,
+});
+
+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 });
+        };
+        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 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 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 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 { 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;
+            }
+        }
+    }), [sortState, tableData]);
+    const sortedRows = React__namespace["default"].useMemo(() => {
+        // Early return if there is no table data
+        if (!tableData) {
+            return;
+        }
+        // Return rows as is if there are no sortable columns
+        if (sortState.index < 0) {
+            return tableData.rows;
+        }
+        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 ?? [],
+        rows: sortedRows ?? [],
+    };
+};
+
+const DataTableControl = () => {
+    const props = useDataTable();
+    const Resolved = useResolvedComposable(DataTable, 'DataTable');
+    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 SearchControl = () => {
+    const { data, onSearch, onSearchQueryChange, onSearchClear } = useControlsContext();
+    const { searchPlaceholder, searchClearLabel, searchQuery, searchSubmitLabel, } = data;
+    const Resolved = useResolvedComposable(SearchField$1, 'SearchField');
+    return (React__namespace["default"].createElement(Resolved, { placeholder: searchPlaceholder, query: searchQuery, clearLabel: searchClearLabel, submitLabel: searchSubmitLabel, onSearch: onSearch, onQueryChange: onSearchQueryChange, onClear: onSearchClear }));
+};
+
+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 });
+};
+
+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',
+    tableColumnProgressHeader: 'Progress',
+};
+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 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 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' };
+        }
+        return {
+            content: `${COMPLETE} files copied, ${FAILED} files failed to copy.`,
+            type: 'error',
+        };
+    },
+    searchSubmitLabel: 'Submit',
+    searchClearLabel: 'Clear search',
+};
+
+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' };
+        }
+        return {
+            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
+            type: 'error',
+        };
+    },
+};
+
+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,
+            };
+        }
+        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';
+            default:
+                return key;
+        }
+    },
+    getTitle: (location) => {
+        const { current, key } = location;
+        const { bucket = '' } = current ?? {};
+        return key || bucket;
+    },
+};
+
+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, locations, hasExhaustedSearch, hasError = false, message, } = data ?? {};
+        if (isLoading) {
+            return undefined;
+        }
+        if (hasError) {
+            return {
+                type: 'error',
+                content: message ?? DEFAULT_ERROR_MESSAGE,
+            };
+        }
+        if (locations?.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 DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Upload',
+    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 tooBigFileNames = data.invalidFiles
+            .filter(({ file }) => isFileTooBig(file))
+            .map(({ file }) => file.name)
+            .join(', ');
+        if (tooBigFileNames) {
+            return {
+                content: `Files larger than 160GB cannot be added to the upload queue: ${tooBigFileNames}`,
+                type: 'warning',
+            };
+        }
+        return undefined;
+    },
+    statusDisplayOverwritePreventedLabel: 'Overwrite prevented',
+    overwriteToggleLabel: 'Overwrite existing files',
+};
+
+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,
+    LocationDetailView: DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT,
+    LocationsView: DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT,
+    UploadView: DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT,
+};
+
+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, LocationDetailView, LocationsView, UploadView, } = displayText;
+    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,
+        },
+        LocationDetailView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
+            ...LocationDetailView,
+        },
+        LocationsView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,
+            ...LocationsView,
+        },
+        UploadView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.UploadView,
+            ...UploadView,
+        },
+    };
+}
+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 getActionIcon = (status) => {
+    switch (status) {
+        case 'PENDING': {
+            return 'action-progress';
+        }
+        case 'COMPLETE': {
+            return 'action-success';
+        }
+        case 'FAILED': {
+            return 'action-error';
+        }
+        case 'OVERWRITE_PREVENTED': {
+            return 'action-info';
+        }
+        case 'CANCELED': {
+            return 'action-canceled';
+        }
+        case 'QUEUED':
+        default: {
+            return 'action-queued';
+        }
+    }
+};
+
+const getFileTypeDisplayValue = (fileName) => fileName.lastIndexOf('.') !== -1
+    ? fileName.slice(fileName.lastIndexOf('.') + 1)
+    : '';
+
+const getPercentValue = (value) => Math.round(value * 100);
+
+const getDefaultActionViewHeaders = ({ displayText: { tableColumnNameHeader, tableColumnTypeHeader, tableColumnSizeHeader, tableColumnStatusHeader, tableColumnCancelHeader, tableColumnFolderHeader, }, }) => {
+    return [
+        {
+            key: 'name',
+            type: 'sort',
+            content: { label: tableColumnNameHeader },
+        },
+        {
+            key: 'folder',
+            type: 'sort',
+            content: { label: tableColumnFolderHeader },
+        },
+        { key: 'type', type: 'sort', content: { label: tableColumnTypeHeader } },
+        { key: 'size', type: 'sort', content: { label: tableColumnSizeHeader } },
+        {
+            key: 'status',
+            type: 'sort',
+            content: { label: tableColumnStatusHeader },
+        },
+        { key: 'cancel', type: 'text', content: { text: tableColumnCancelHeader } },
+    ];
+};
+
+const getTaskStatusDisplayLabel = ({ status, displayText: { statusDisplayInProgressLabel, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, statusDisplayOverwritePreventedLabel, }, }) => {
+    switch (status) {
+        case 'PENDING':
+            return statusDisplayInProgressLabel;
+        case 'CANCELED':
+            return statusDisplayCanceledLabel;
+        case 'COMPLETE':
+            return statusDisplayCompletedLabel;
+        case 'FAILED':
+            return statusDisplayFailedLabel;
+        case 'QUEUED':
+            return statusDisplayQueuedLabel;
+        case 'OVERWRITE_PREVENTED':
+            return statusDisplayOverwritePreventedLabel;
+        default:
+            return statusDisplayQueuedLabel;
+    }
+};
+const getProgressHeader = (label) => ({
+    key: 'progress',
+    type: 'sort',
+    content: { label },
+});
+const getActionViewTableData = ({ tasks, displayText, isProcessing, locationKey, shouldDisplayProgress = false, onTaskRemove, }) => {
+    const headers = [
+        ...getDefaultActionViewHeaders({
+            displayText,
+        }),
+    ];
+    if (shouldDisplayProgress) {
+        headers.splice(-1, 0, getProgressHeader(displayText.tableColumnProgressHeader));
+    }
+    const rows = tasks.map((task) => {
+        const { cancel, data, progress, status } = task;
+        const { id } = data;
+        const displayKey = isFileDataItem(data)
+            ? data.fileKey
+            : data.key.split('/').pop() ?? '';
+        return {
+            key: id,
+            content: headers.map(({ key: columnKey }) => {
+                const key = `${columnKey}-${id}`;
+                switch (columnKey) {
+                    case 'name': {
+                        return {
+                            key,
+                            type: 'text',
+                            content: {
+                                icon: getActionIcon(status),
+                                text: displayKey,
+                            },
+                        };
+                    }
+                    case 'folder': {
+                        if (locationKey) {
+                            return { key, type: 'text', content: { text: locationKey } };
+                        }
+                        if (isFileItem(data)) {
+                            const { webkitRelativePath } = data.file;
+                            return {
+                                key,
+                                type: 'text',
+                                content: {
+                                    text: webkitRelativePath
+                                        ? webkitRelativePath.slice(0, webkitRelativePath.lastIndexOf('/') + 1)
+                                        : '-',
+                                },
+                            };
+                        }
+                        return { key, type: 'text', content: { text: '/' } };
+                    }
+                    case 'type': {
+                        return {
+                            key,
+                            type: 'text',
+                            content: { text: getFileTypeDisplayValue(displayKey) },
+                        };
+                    }
+                    case 'size': {
+                        const value = isFileItem(data)
+                            ? data.file.size
+                            : isFileDataItem(data)
+                                ? data.size
+                                : undefined;
+                        return {
+                            key,
+                            type: 'number',
+                            content: {
+                                value,
+                                displayValue: value ? ui.humanFileSize(value, true) : '-',
+                            },
+                        };
+                    }
+                    case 'status': {
+                        return {
+                            key,
+                            type: 'text',
+                            content: {
+                                text: getTaskStatusDisplayLabel({ status, displayText }),
+                            },
+                        };
+                    }
+                    case 'progress': {
+                        return {
+                            key,
+                            type: 'number',
+                            content: {
+                                value: progress,
+                                displayValue: `${getPercentValue(progress ?? 0)}%`,
+                            },
+                        };
+                    }
+                    case 'cancel': {
+                        const isPending = status === 'PENDING';
+                        const isQueued = status === 'QUEUED';
+                        const isDisabled = (!isPending && !isQueued) || !cancel || progress === 1;
+                        const ariaLabel = `${isProcessing ? 'Cancel' : 'Remove'} item: ${displayKey}`;
+                        return {
+                            key,
+                            type: 'button',
+                            content: {
+                                isDisabled,
+                                onClick: () => {
+                                    if (!isProcessing) {
+                                        onTaskRemove?.(task);
+                                    }
+                                    cancel?.();
+                                },
+                                ariaLabel,
+                                icon: 'cancel',
+                            },
+                        };
+                    }
+                    default:
+                        return { key, type: 'text', content: {} };
+                }
+            }),
+        };
+    });
+    return { headers, rows };
+};
+
+const defaultValue$2 = {};
+const { useFoldersMessage, FoldersMessageProvider } = uiReactCore.createContextUtilities({ contextName: 'FoldersMessage', defaultValue: defaultValue$2 });
+const FoldersMessageControl = () => {
+    const { CopyView: { getListFoldersResultsMessage }, } = useDisplayText();
+    const { hasError, folders, message, query, hasExhaustedSearch } = useFoldersMessage();
+    const messageContent = getListFoldersResultsMessage({
+        hasError,
+        folders,
+        message,
+        query,
+        hasExhaustedSearch,
+    });
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: { message: messageContent } },
+        React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+            React__namespace["default"].createElement(MessageControl, null))));
+};
+FoldersMessageControl.displayName = 'FoldersMessage';
+
+const defaultValue$1 = {};
+const { FoldersPaginationProvider, useFoldersPagination } = uiReactCore.createContextUtilities({ contextName: 'FoldersPagination', defaultValue: defaultValue$1 });
+const FoldersPaginationControl = () => {
+    const props = useFoldersPagination();
+    const Resolved = useResolvedComposable(Pagination$1, 'Pagination');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+FoldersPaginationControl.displayName = 'FoldersPagination';
+
+const DESTINATION_PICKER_COLUMNS = [
+    { key: 'name', type: 'sort', content: { label: 'Folder name' } },
+];
+const getDestinationPickerTableData = ({ prefix, path, folders, onSelectFolder, }) => {
+    const rows = !folders
+        ? []
+        : folders.map(({ id, key }) => {
+            const folderSubPath = key.slice(`${prefix ?? ''}${path}`.length);
+            const folderLocationPath = key.slice(prefix.length);
+            const row = {
+                key: id,
+                content: [
+                    {
+                        key: `${DESTINATION_PICKER_COLUMNS[0].key}-${id}`,
+                        type: 'button',
+                        content: {
+                            icon: 'folder',
+                            ariaLabel: folderSubPath,
+                            label: folderSubPath,
+                            onClick: () => {
+                                onSelectFolder?.(id, folderLocationPath);
+                            },
+                        },
+                    },
+                ],
+            };
+            return row;
+        });
+    return {
+        headers: DESTINATION_PICKER_COLUMNS,
+        rows,
+    };
+};
+
+const defaultValue = {};
+const { useFoldersTable, FoldersTableProvider } = uiReactCore.createContextUtilities({ contextName: 'FoldersTable', defaultValue });
+const FoldersTableControl = () => {
+    const { destination, folders, onSelectFolder } = useFoldersTable();
+    const { current, path = '' } = destination ?? {};
+    const tableData = getDestinationPickerTableData({
+        prefix: current?.prefix ?? '',
+        path,
+        folders,
+        onSelectFolder,
+    });
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: { tableData } },
+        React__namespace["default"].createElement(DataTableControl, null)));
+};
+FoldersTableControl.displayName = 'FoldersTable';
+
+function CopyViewProvider({ children, ...props }) {
+    const { CopyView: displayText } = useDisplayText();
+    const { actionCancelLabel, actionDestinationLabel, actionExitLabel, actionStartLabel, getActionCompleteMessage, overwriteWarningMessage, searchPlaceholder, searchSubmitLabel, searchClearLabel, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = displayText;
+    const { destination, folders, isProcessing, isProcessingComplete, location, statusCounts, tasks, onActionCancel, onActionExit, onActionStart, onSelectDestination, onTaskRemove, } = props;
+    const { hasNextPage, highestPageVisited, hasError: hasFoldersError, message: foldersErrorMessage, query, hasExhaustedSearch, isLoading, page, pageItems, onPaginate, onQuery, onSearchClear, onSearch, onSelectFolder, } = folders;
+    const { key: locationKey } = location ?? {};
+    const tableData = getActionViewTableData({
+        tasks,
+        locationKey,
+        isProcessing,
+        displayText,
+        onTaskRemove,
+    });
+    const isActionStartDisabled = isProcessing || isProcessingComplete || !destination?.current;
+    const isActionCancelDisabled = !isProcessing || isProcessingComplete;
+    const message = !isProcessingComplete
+        ? {
+            content: overwriteWarningMessage,
+            type: 'warning',
+        }
+        : getActionCompleteMessage({ counts: statusCounts });
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            actionCancelLabel,
+            actionDestinationLabel,
+            actionExitLabel,
+            actionStartLabel,
+            destination,
+            isActionCancelDisabled,
+            isActionDestinationNavigable: !isProcessing && !isProcessingComplete,
+            isActionExitDisabled: isProcessing,
+            isActionStartDisabled,
+            isLoading,
+            message,
+            searchQuery: query,
+            searchPlaceholder,
+            searchSubmitLabel,
+            searchClearLabel,
+            statusCounts,
+            statusDisplayCanceledLabel,
+            statusDisplayCompletedLabel,
+            statusDisplayFailedLabel,
+            statusDisplayQueuedLabel,
+            tableData,
+        }, onActionCancel: onActionCancel, onActionExit: onActionExit, onActionStart: onActionStart, onSearch: onSearch, onSearchClear: onSearchClear, onSearchQueryChange: onQuery, onSelectDestination: onSelectDestination },
+        React__namespace["default"].createElement(FoldersPaginationProvider, { hasNextPage: hasNextPage, highestPageVisited: highestPageVisited, page: page, onPaginate: onPaginate },
+            React__namespace["default"].createElement(FoldersTableProvider, { destination: destination, folders: pageItems, onSelectFolder: onSelectFolder },
+                React__namespace["default"].createElement(FoldersMessageProvider, { folders: folders.pageItems, hasError: hasFoldersError, message: foldersErrorMessage, query: query, hasExhaustedSearch: hasExhaustedSearch }, children)))));
+}
+
+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 {
+            name: part,
+            ...(isCurrent && { isCurrent }),
+            onNavigate: () => {
+                onNavigate?.(destination, destinationPath);
+            },
+        };
+    });
+};
+
+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 prefixParts = type === 'BUCKET' ? [bucket] : [firstPrefixPart.join('')];
+    if (type === 'BUCKET' && trimmedPrefix) {
+        prefixParts.push(trimmedPrefix);
+    }
+    const pathParts = trimmedPath ? trimmedPath.split('/') : [];
+    return prefixParts.concat(pathParts);
+};
+
+// import { ActionDestinationProps } from '../../composables/ActionDestination';
+const useActionDestination = () => {
+    const { data, onSelectDestination } = useControlsContext();
+    const { actionDestinationLabel, isActionDestinationNavigable, destination } = data;
+    return React__namespace["default"].useMemo(() => {
+        if (!destination?.current) {
+            return { items: [] };
+        }
+        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 ActionDestinationControl = () => {
+    const props = useActionDestination();
+    const Resolved = useResolvedComposable(ActionDestination$1, 'ActionDestination');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const INITIAL_STATUS_COUNTS = {
+    CANCELED: 0,
+    COMPLETE: 0,
+    FAILED: 0,
+    PENDING: 0,
+    OVERWRITE_PREVENTED: 0,
+    QUEUED: 0,
+    TOTAL: 0,
+};
+
+const getStatusCounts = (tasks = []) => tasks.reduce((counts, { status }) => ({ ...counts, [status]: counts[status] + 1 }), { ...INITIAL_STATUS_COUNTS, TOTAL: tasks.length });
+const isProcessingTasks = (statusCounts) => {
+    if (statusCounts.TOTAL === 0 || statusCounts.TOTAL === statusCounts.QUEUED) {
+        return false;
+    }
+    return !(statusCounts.QUEUED === 0 && statusCounts.PENDING === 0);
+};
+const hasCompletedProcessingTasks = (statusCounts) => {
+    if (statusCounts.TOTAL === 0 || isProcessingTasks(statusCounts))
+        return false;
+    return statusCounts.QUEUED === 0 && statusCounts.PENDING === 0;
+};
+
+const QUEUED_TASK_BASE = {
+    cancel: undefined,
+    message: undefined,
+    progress: undefined,
+    status: 'QUEUED',
+};
+const isTaskHandlerInput = (input) => !!input.data;
+const useProcessTasks = (handler, items, options) => {
+    const { concurrency, ...callbacks } = options ?? {};
+    const callbacksRef = React__namespace["default"].useRef(callbacks);
+    if (callbacks) {
+        callbacksRef.current = callbacks;
+    }
+    const tasksRef = React__namespace["default"].useRef(new Map());
+    const flush = React__namespace["default"].useReducer(() => ({}), {})[1];
+    const updateTask = React__namespace["default"].useCallback((id, next) => {
+        const { onTaskRemove } = callbacksRef.current;
+        const task = tasksRef.current.get(id);
+        if (!task)
+            return;
+        if (!next) {
+            onTaskRemove?.(task);
+            tasksRef.current.delete(id);
+        }
+        else {
+            tasksRef.current.set(id, { ...task, ...next });
+        }
+        flush();
+    }, [flush]);
+    const createTask = React__namespace["default"].useCallback((data) => {
+        const getTask = () => tasksRef.current.get(data.id);
+        const { onTaskCancel } = callbacksRef.current;
+        function cancel() {
+            const task = getTask();
+            if (!task || task?.status !== 'QUEUED')
+                return;
+            if (task && ui.isFunction(onTaskCancel))
+                onTaskCancel(task);
+            updateTask(data.id, { cancel: undefined, status: 'CANCELED' });
+        }
+        const task = { ...QUEUED_TASK_BASE, cancel, data };
+        tasksRef.current.set(data.id, task);
+    }, [updateTask]);
+    React__namespace["default"].useEffect(() => {
+        // Sync tasks with items by first creating a lookup of current tasks
+        const taskLookup = {};
+        tasksRef.current.forEach(({ data }) => {
+            taskLookup[data.id] = true;
+        });
+        items?.forEach((item) => {
+            if (!taskLookup[item.id]) {
+                // If an item doesn't yet have a task created for it, create one
+                createTask(item);
+            }
+            // Remove the item from the lookup to mark it as "synced"
+            delete taskLookup[item.id];
+        });
+        // Remaining tasks are items which have been removed from state but not yet from tasks, so they should be removed
+        Object.keys(taskLookup).forEach((taskId) => {
+            // This should not happen, but if the task is pending then it cannot be removed
+            if (tasksRef.current.get(taskId)?.status === 'PENDING')
+                return;
+            updateTask(taskId);
+        });
+        flush();
+    }, [createTask, flush, updateTask, items]);
+    const processNextTask = (_input) => {
+        const hasInputData = isTaskHandlerInput(_input);
+        if (hasInputData) {
+            createTask(_input.data);
+            flush();
+        }
+        const { data } = hasInputData
+            ? _input
+            : [...tasksRef.current.values()].find(({ status }) => status === 'QUEUED') ?? {};
+        if (!data)
+            return;
+        const { onTaskCancel, onTaskComplete, onTaskError, onTaskProgress, onTaskSuccess, } = callbacksRef.current;
+        const getTask = () => tasksRef.current.get(data.id);
+        const onProgress = ({ id }, progress) => {
+            const task = getTask();
+            if (task && ui.isFunction(onTaskProgress)) {
+                onTaskProgress(task, progress);
+            }
+            updateTask(id, { progress });
+        };
+        const { options } = _input;
+        const input = { ..._input, data, options: { ...options, onProgress } };
+        const { cancel: _cancel, result } = handler(input);
+        const cancel = !_cancel
+            ? undefined
+            : () => {
+                const task = getTask();
+                if (task && ui.isFunction(onTaskCancel))
+                    onTaskCancel(task);
+                _cancel();
+            };
+        result
+            .then((output) => {
+            const task = getTask();
+            if (task && ui.isFunction(onTaskSuccess))
+                onTaskSuccess(task);
+            updateTask(data.id, output);
+        })
+            .catch((e) => {
+            const task = getTask();
+            if (task && ui.isFunction(onTaskError))
+                onTaskError(task, e);
+            updateTask(data.id, { message: e.message, status: 'FAILED' });
+        })
+            .finally(() => {
+            const task = getTask();
+            if (task && ui.isFunction(onTaskComplete))
+                onTaskComplete(task);
+            // ignore process next task for single operation inputs
+            if (hasInputData)
+                return;
+            processNextTask(_input);
+        });
+        updateTask(data.id, { cancel, status: 'PENDING' });
+    };
+    const tasks = [...tasksRef.current.values()];
+    const statusCounts = getStatusCounts(tasks);
+    const isProcessing = isProcessingTasks(statusCounts);
+    const isProcessingComplete = hasCompletedProcessingTasks(statusCounts);
+    const handleProcessTasks = (input) => {
+        if (isProcessing) {
+            return;
+        }
+        if (!concurrency) {
+            processNextTask(input);
+            return;
+        }
+        let count = 0;
+        while (count < concurrency) {
+            processNextTask(input);
+            count++;
+        }
+    };
+    return [
+        { isProcessing, isProcessingComplete, statusCounts, tasks },
+        handleProcessTasks,
+    ];
+};
+
+const usePaginate = ({ hasNextToken, items, paginateCallback, pageSize, }) => {
+    const [currentPage, setCurrentPage] = React__namespace["default"].useState(1);
+    const handleReset = React__namespace["default"].useRef(() => {
+        setCurrentPage(1);
+    }).current;
+    return React__namespace["default"].useMemo(() => {
+        const resultCount = Array.isArray(items) ? items.length : 0;
+        const highestPageVisited = Math.ceil(resultCount / pageSize);
+        const isFirstPage = currentPage === 1;
+        const start = isFirstPage ? 0 : (currentPage - 1) * pageSize;
+        const end = isFirstPage ? pageSize : currentPage * pageSize;
+        const pageItems = Array.isArray(items) ? items.slice(start, end) : [];
+        return {
+            currentPage,
+            onPaginate: (page) => {
+                const shouldPaginate = page >= 1 && (page <= highestPageVisited || hasNextToken);
+                if (shouldPaginate) {
+                    if (ui.isFunction(paginateCallback))
+                        paginateCallback();
+                    setCurrentPage(page);
+                }
+            },
+            handleReset,
+            highestPageVisited,
+            pageItems,
+        };
+    }, [
+        currentPage,
+        handleReset,
+        hasNextToken,
+        items,
+        paginateCallback,
+        pageSize,
+    ]);
+};
+
+function useSearch(props) {
+    const { onSearch } = props;
+    const [searchQuery, setQuery] = React__namespace["default"].useState('');
+    const [isSearchingSubfolders, setIsSearchingSubfolders] = React__namespace["default"].useState(false);
+    const resetSearch = () => {
+        setQuery('');
+        setIsSearchingSubfolders(false);
+    };
+    return {
+        searchQuery,
+        isSearchingSubfolders,
+        onSearchQueryChange: (value) => {
+            setQuery(value);
+        },
+        onToggleSearchSubfolders: () => {
+            setIsSearchingSubfolders((prev) => !prev);
+        },
+        onSearchSubmit: () => {
+            onSearch?.(searchQuery, isSearchingSubfolders);
+        },
+        resetSearch,
+    };
+}
+
+const DEFAULT_PAGE_SIZE$2 = 100;
+const DEFAULT_LIST_OPTIONS$2 = {
+    pageSize: DEFAULT_PAGE_SIZE$2,
+    delimiter: '/',
+    exclude: 'FILE',
+};
+const DEFAULT_REFRESH_OPTIONS = { ...DEFAULT_LIST_OPTIONS$2, refresh: true };
+const listLocationItemsAction$1 = createEnhancedListHandler(listLocationItemsHandler);
+const useFolders = ({ destination, setDestination, }) => {
+    const { current, key } = destination;
+    const [{ data, hasError, isLoading, message }, handleList] = uiReactCore.useDataState(listLocationItemsAction$1, { items: [], nextToken: undefined });
+    const getInput = useGetActionInput();
+    const { items, nextToken, search } = data;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const onInitialize = React__namespace["default"].useCallback(() => {
+        handleList({
+            config: getInput(),
+            prefix: key,
+            options: { ...DEFAULT_REFRESH_OPTIONS },
+        });
+    }, [getInput, handleList, key]);
+    const hasNextToken = !!nextToken;
+    const paginateCallback = () => {
+        if (!nextToken)
+            return;
+        handleList({
+            config: getInput(),
+            prefix: key,
+            options: { ...DEFAULT_LIST_OPTIONS$2, nextToken },
+        });
+    };
+    const { currentPage: page, onPaginate, highestPageVisited, pageItems, handleReset, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: DEFAULT_PAGE_SIZE$2,
+        hasNextToken,
+    });
+    const onSearch = (query) => {
+        handleReset();
+        handleList({
+            config: getInput(),
+            prefix: key,
+            options: {
+                ...DEFAULT_LIST_OPTIONS$2,
+                search: { query, filterBy: 'key' },
+            },
+        });
+    };
+    const { onSearchSubmit, searchQuery: query, resetSearch, onSearchQueryChange: onQuery, } = useSearch({ onSearch });
+    const onSelectFolder = (id, folderLocationPath) => {
+        if (!current) {
+            return;
+        }
+        resetSearch();
+        setDestination({
+            current: { ...current, id },
+            path: folderLocationPath,
+            key: `${current.prefix ?? ''}${folderLocationPath}`,
+        });
+    };
+    return {
+        hasError,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        isLoading,
+        message,
+        onInitialize,
+        page,
+        pageItems,
+        query,
+        hasExhaustedSearch,
+        onPaginate,
+        onQuery,
+        onSearch: onSearchSubmit,
+        onSearchClear: () => {
+            handleReset();
+            resetSearch();
+            handleList({
+                config: getInput(),
+                prefix: key,
+                options: { ...DEFAULT_REFRESH_OPTIONS },
+            });
+        },
+        onSelectFolder,
+    };
+};
+
+const useCopyView = (options) => {
+    const { onExit } = options ?? {};
+    const [{ location, locationItems: { fileDataItems }, }, dispatchStoreAction,] = useStore();
+    const getInput = useGetActionInput();
+    const [processState, handleProcess] = useProcessTasks(copyHandler, fileDataItems, { concurrency: 4 });
+    const [destination, setDestination] = React.useState(location);
+    const folders = useFolders({ destination, setDestination });
+    const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
+    const { current } = location;
+    const { onInitialize } = folders;
+    // initial load
+    React__namespace["default"].useEffect(() => {
+        onInitialize();
+    }, [onInitialize]);
+    const onActionStart = () => {
+        handleProcess({
+            config: getInput(),
+            destinationPrefix: destination.key,
+        });
+    };
+    const onActionCancel = () => {
+        tasks.forEach((task) => {
+            if (ui.isFunction(task.cancel))
+                task.cancel();
+        });
+    };
+    const onActionExit = () => {
+        // clear files state
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        // clear selected action
+        dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        if (ui.isFunction(onExit))
+            onExit(current);
+    };
+    const onTaskRemove = React__namespace["default"].useCallback(({ data }) => {
+        dispatchStoreAction({ type: 'REMOVE_LOCATION_ITEM', id: data.id });
+    }, [dispatchStoreAction]);
+    const onSelectDestination = (selectedDestination, path) => {
+        setDestination({
+            current: selectedDestination,
+            path: path ?? '',
+            key: `${selectedDestination.prefix ?? ''}${path}`,
+        });
+    };
+    return {
+        destination,
+        isProcessing,
+        isProcessingComplete,
+        folders,
+        location,
+        statusCounts,
+        tasks,
+        onActionCancel,
+        onActionStart,
+        onActionExit,
+        onSelectDestination,
+        onTaskRemove,
+    };
+};
+
+const CopyView = ({ className, ...props }) => {
+    const state = useCopyView(props);
+    const { isProcessing, isProcessingComplete } = state;
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__namespace["default"].createElement(CopyViewProvider, { ...state },
+            React__namespace["default"].createElement(ActionExitControl, null),
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__namespace["default"].createElement(DataTableControl, null)),
+            isProcessing || isProcessingComplete ? null : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                    React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
+                        React__namespace["default"].createElement(SearchControl, null)),
+                    React__namespace["default"].createElement(FoldersPaginationControl, null)),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                    React__namespace["default"].createElement(LoadingIndicatorControl, null),
+                    React__namespace["default"].createElement(FoldersTableControl, null),
+                    React__namespace["default"].createElement(FoldersMessageControl, null)))),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__summary` },
+                React__namespace["default"].createElement(ActionDestinationControl, null),
+                React__namespace["default"].createElement(StatusDisplayControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__namespace["default"].createElement(MessageControl, null),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__namespace["default"].createElement(ActionCancelControl, null),
+                    React__namespace["default"].createElement(ActionStartControl, null))))));
+};
+CopyView.displayName = 'CopyView';
+CopyView.Provider = CopyViewProvider;
+CopyView.Cancel = ActionCancelControl;
+CopyView.Destination = ActionDestinationControl;
+CopyView.Exit = ActionExitControl;
+CopyView.FoldersLoadingIndicator = LoadingIndicatorControl;
+CopyView.FoldersMessage = FoldersMessageControl;
+CopyView.FoldersPagination = FoldersPaginationControl;
+CopyView.FoldersSearch = SearchControl;
+CopyView.FoldersTable = FoldersTableControl;
+CopyView.Message = MessageControl;
+CopyView.Start = ActionStartControl;
+CopyView.Statuses = StatusDisplayControl;
+CopyView.TasksTable = DataTableControl;
+CopyView.Title = TitleControl;
+
+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 isValidFolderName = (name) => !!name?.length &&
+    !name.includes('/') &&
+    !name.trim().endsWith('.') &&
+    !name.trim().startsWith('.');
+
+function CreateFolderViewProvider({ children, ...props }) {
+    const { CreateFolderView: { actionExitLabel, actionStartLabel, folderNameLabel, folderNamePlaceholder, getActionCompleteMessage, getValidationMessage, title, }, } = useDisplayText();
+    const { folderName, folderNameId, isProcessing, isProcessingComplete, onActionStart, onActionExit, onFolderNameChange, statusCounts, } = props;
+    const [validationMessage, setValidationMessage] = React__namespace["default"].useState();
+    const message = isProcessingComplete
+        ? getActionCompleteMessage({ counts: statusCounts })
+        : undefined;
+    const onValidateFolderName = (value) => {
+        setValidationMessage(() => isValidFolderName(value) ? undefined : getValidationMessage(value));
+    };
+    const isActionStartDisabled = !folderName.length ||
+        !!validationMessage ||
+        isProcessing ||
+        isProcessingComplete;
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            actionExitLabel,
+            folderNameId,
+            folderNameLabel,
+            folderNamePlaceholder,
+            folderNameValidationMessage: validationMessage,
+            actionStartLabel,
+            isActionStartDisabled,
+            isActionExitDisabled: isProcessing,
+            message,
+            title,
+        }, onActionExit: onActionExit, onActionStart: onActionStart, onFolderNameChange: onFolderNameChange, onValidateFolderName: onValidateFolderName }, children));
+}
+
+const useCreateFolderView = (options) => {
+    const { onExit } = options ?? {};
+    const [folderName, setFolderName] = React__namespace["default"].useState('');
+    const folderNameId = React__namespace["default"].useRef(crypto.randomUUID()).current;
+    const getConfig = useGetActionInput();
+    const [{ tasks, isProcessing, isProcessingComplete, statusCounts }, handleCreateFolder,] = useProcessTasks(createFolderHandler);
+    const [{ location }, dispatchStoreAction] = useStore();
+    const { current, key: destinationPrefix } = location;
+    return {
+        folderName,
+        folderNameId,
+        isProcessing,
+        isProcessingComplete,
+        location,
+        onActionStart: () => {
+            handleCreateFolder({
+                config: getConfig(),
+                data: { id: folderNameId, key: `${folderName}/` },
+                destinationPrefix,
+                options: { preventOverwrite: true },
+            });
+        },
+        onActionExit: () => {
+            if (ui.isFunction(onExit))
+                onExit(current);
+            dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        },
+        onFolderNameChange: (value) => {
+            setFolderName(value.trim());
+        },
+        statusCounts,
+        tasks,
+    };
+};
+
+const CreateFolderView = ({ className, ...props }) => {
+    const state = useCreateFolderView(props);
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__namespace["default"].createElement(CreateFolderViewProvider, { ...state },
+            React__namespace["default"].createElement(ActionExitControl, null),
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(FolderNameFieldControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                    React__namespace["default"].createElement(MessageControl, null)),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__namespace["default"].createElement(ActionStartControl, null))))));
+};
+CreateFolderView.displayName = 'CreateFolderView';
+CreateFolderView.Provider = CreateFolderViewProvider;
+CreateFolderView.Exit = ActionExitControl;
+CreateFolderView.NameField = FolderNameFieldControl;
+CreateFolderView.Message = MessageControl;
+CreateFolderView.Start = ActionStartControl;
+CreateFolderView.Title = TitleControl;
+
+function DeleteViewProvider({ children, ...props }) {
+    const { DeleteView: displayText } = useDisplayText();
+    const { actionCancelLabel, actionExitLabel, actionStartLabel, title, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, getActionCompleteMessage, } = displayText;
+    const { isProcessing, isProcessingComplete, location, statusCounts, tasks, onActionCancel, onActionStart, onActionExit, onTaskRemove, } = props;
+    const message = isProcessingComplete
+        ? getActionCompleteMessage({ counts: statusCounts })
+        : undefined;
+    const tableData = getActionViewTableData({
+        tasks,
+        locationKey: location.key,
+        isProcessing,
+        displayText,
+        onTaskRemove,
+    });
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            actionCancelLabel,
+            actionExitLabel,
+            actionStartLabel,
+            isActionCancelDisabled: !isProcessing || isProcessingComplete,
+            isActionExitDisabled: isProcessing,
+            isActionStartDisabled: isProcessing || isProcessingComplete,
+            statusDisplayCanceledLabel,
+            statusDisplayCompletedLabel,
+            statusDisplayFailedLabel,
+            statusDisplayQueuedLabel,
+            statusCounts,
+            tableData,
+            title,
+            message,
+        }, onActionStart: onActionStart, onActionExit: onActionExit, onActionCancel: onActionCancel }, children));
+}
+
+const useDeleteView = (options) => {
+    const { onExit: _onExit } = options ?? {};
+    const [{ location, locationItems }, dispatchStoreAction] = useStore();
+    const { fileDataItems } = locationItems;
+    const { current } = location;
+    const getInput = useGetActionInput();
+    const [processState, handleProcess] = useProcessTasks(deleteHandler, fileDataItems, { concurrency: 4 });
+    const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
+    const onActionStart = () => {
+        if (!current)
+            return;
+        handleProcess({ config: getInput() });
+    };
+    const onActionCancel = () => {
+        tasks.forEach((task) => {
+            // @TODO Fixme, calling cancel on task doesn't currently work
+            if (ui.isFunction(task.cancel))
+                task.cancel();
+        });
+    };
+    const onActionExit = () => {
+        // clear files state
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        // clear selected action
+        dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        if (ui.isFunction(_onExit))
+            _onExit(current);
+    };
+    const onTaskRemove = React__namespace["default"].useCallback(({ data }) => {
+        dispatchStoreAction({ type: 'REMOVE_LOCATION_ITEM', id: data.id });
+    }, [dispatchStoreAction]);
+    return {
+        isProcessing,
+        isProcessingComplete,
+        location,
+        statusCounts,
+        tasks,
+        onActionCancel,
+        onActionExit,
+        onActionStart,
+        onTaskRemove,
+    };
+};
+
+const DeleteView = ({ className, ...props }) => {
+    const state = useDeleteView(props);
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__namespace["default"].createElement(DeleteViewProvider, { ...state },
+            React__namespace["default"].createElement(ActionExitControl, null),
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__namespace["default"].createElement(DataTableControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__summary` },
+                React__namespace["default"].createElement(StatusDisplayControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                    React__namespace["default"].createElement(MessageControl, null)),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__namespace["default"].createElement(ActionCancelControl, null),
+                    React__namespace["default"].createElement(ActionStartControl, null))))));
+};
+DeleteView.displayName = 'DeleteView';
+DeleteView.Provider = DeleteViewProvider;
+DeleteView.Cancel = ActionCancelControl;
+DeleteView.Exit = ActionExitControl;
+DeleteView.Message = MessageControl;
+DeleteView.Start = ActionStartControl;
+DeleteView.Statuses = StatusDisplayControl;
+DeleteView.TasksTable = DataTableControl;
+DeleteView.Title = TitleControl;
+
+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 });
+};
+
+/**
+ * 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 useOverwriteToggle = () => {
+    const { data: { isOverwritingEnabled, isOverwriteToggleDisabled, overwriteToggleLabel, }, onToggleOverwrite, } = useControlsContext();
+    return {
+        isDisabled: isOverwriteToggleDisabled,
+        isOverwritingEnabled,
+        label: overwriteToggleLabel,
+        onToggle: onToggleOverwrite,
+    };
+};
+
+const OverwriteToggleControl = () => {
+    const props = useOverwriteToggle();
+    const Resolved = useResolvedComposable(OverwriteToggle$1, 'OverwriteToggle');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+function UploadViewProvider({ children, ...props }) {
+    const { UploadView: displayText } = useDisplayText();
+    const { actionCancelLabel, actionDestinationLabel, actionExitLabel, actionStartLabel, addFilesLabel, addFolderLabel, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, overwriteToggleLabel, title, getActionCompleteMessage, getFilesValidationMessage, } = displayText;
+    const { isOverwritingEnabled, isProcessing, isProcessingComplete, location, tasks, statusCounts, invalidFiles, onActionStart, onActionCancel, onDropFiles, onActionExit, onTaskRemove, onSelectFiles, onToggleOverwrite, } = props;
+    const isActionStartDisabled = isProcessing || isProcessingComplete || statusCounts.TOTAL === 0;
+    const isActionCancelDisabled = !isProcessing || isProcessingComplete;
+    const isAddFilesDisabled = isProcessing || isProcessingComplete;
+    const isAddFolderDisabled = isProcessing || isProcessingComplete;
+    const isActionExitDisabled = isProcessing;
+    const actionCompleteMessage = isProcessingComplete
+        ? getActionCompleteMessage({
+            counts: statusCounts,
+        })
+        : undefined;
+    const filesValidationMessage = invalidFiles && !isProcessing
+        ? getFilesValidationMessage({ invalidFiles })
+        : undefined;
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            actionCancelLabel,
+            actionDestinationLabel,
+            actionExitLabel,
+            actionStartLabel,
+            addFilesLabel,
+            addFolderLabel,
+            isActionCancelDisabled,
+            isActionExitDisabled,
+            isActionStartDisabled,
+            isAddFilesDisabled,
+            isAddFolderDisabled,
+            isActionDestinationNavigable: false,
+            isOverwriteToggleDisabled: isProcessing || isProcessingComplete,
+            isOverwritingEnabled,
+            overwriteToggleLabel,
+            destination: location,
+            message: actionCompleteMessage ?? filesValidationMessage,
+            statusCounts,
+            statusDisplayCanceledLabel,
+            statusDisplayCompletedLabel,
+            statusDisplayFailedLabel,
+            statusDisplayQueuedLabel,
+            tableData: getActionViewTableData({
+                tasks,
+                shouldDisplayProgress: true,
+                displayText,
+                isProcessing,
+                onTaskRemove,
+            }),
+            title,
+        }, onActionCancel: onActionCancel, onActionExit: onActionExit, onActionStart: onActionStart, onAddFiles: () => {
+            onSelectFiles('FILE');
+        }, onAddFolder: () => {
+            onSelectFiles('FOLDER');
+        }, onDropFiles: onDropFiles, onToggleOverwrite: onToggleOverwrite }, children));
+}
+
+const DEFAULT_ACTION_CONCURRENCY = 4;
+
+const DEFAULT_OVERWRITE_ENABLED = false;
+
+const useUploadView = (options) => {
+    const { onExit: _onExit } = options ?? {};
+    const getInput = useGetActionInput();
+    const [{ files, location }, dispatchStoreAction] = useStore();
+    const { current, key } = location;
+    const { invalidFiles, validFiles } = React__namespace["default"].useMemo(() => (files ?? [])?.reduce((curr, file) => {
+        if (isFileTooBig(file.file)) {
+            curr.invalidFiles = ui.isUndefined(curr.invalidFiles)
+                ? [file]
+                : curr.invalidFiles.concat(file);
+        }
+        else {
+            curr.validFiles = ui.isUndefined(curr.validFiles)
+                ? [file]
+                : curr.validFiles.concat(file);
+        }
+        return curr;
+    }, {}), [files]);
+    const [isOverwritingEnabled, setIsOverwritingEnabled] = React__namespace["default"].useState(DEFAULT_OVERWRITE_ENABLED);
+    const [{ isProcessing, isProcessingComplete, statusCounts, tasks }, handleProcess,] = useProcessTasks(uploadHandler, validFiles, {
+        concurrency: DEFAULT_ACTION_CONCURRENCY,
+    });
+    const onDropFiles = React__namespace["default"].useCallback((files) => {
+        if (files) {
+            dispatchStoreAction({ type: 'ADD_FILE_ITEMS', files });
+        }
+    }, [dispatchStoreAction]);
+    const onSelectFiles = React__namespace["default"].useCallback((type) => {
+        dispatchStoreAction({ type: 'SELECT_FILES', selectionType: type });
+    }, [dispatchStoreAction]);
+    const onActionStart = React__namespace["default"].useCallback(() => {
+        invalidFiles?.forEach((file) => {
+            dispatchStoreAction({ type: 'REMOVE_FILE_ITEM', id: file.id });
+        });
+        handleProcess({
+            config: getInput(),
+            destinationPrefix: key,
+            options: { preventOverwrite: !isOverwritingEnabled },
+        });
+    }, [
+        isOverwritingEnabled,
+        key,
+        getInput,
+        handleProcess,
+        invalidFiles,
+        dispatchStoreAction,
+    ]);
+    const onActionCancel = React__namespace["default"].useCallback(() => {
+        tasks.forEach((task) => task.cancel?.());
+    }, [tasks]);
+    const onActionExit = React__namespace["default"].useCallback(() => {
+        // clear files state
+        dispatchStoreAction({ type: 'RESET_FILE_ITEMS' });
+        // clear selected action
+        dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        _onExit?.(current);
+    }, [dispatchStoreAction, _onExit, current]);
+    const onToggleOverwrite = React__namespace["default"].useCallback(() => {
+        setIsOverwritingEnabled((prev) => !prev);
+    }, []);
+    const onTaskRemove = React__namespace["default"].useCallback(({ data }) => {
+        dispatchStoreAction({ type: 'REMOVE_FILE_ITEM', id: data.id });
+    }, [dispatchStoreAction]);
+    return {
+        isProcessing,
+        isProcessingComplete,
+        isOverwritingEnabled,
+        location,
+        invalidFiles,
+        statusCounts,
+        tasks,
+        onActionCancel,
+        onActionExit,
+        onActionStart,
+        onDropFiles,
+        onTaskRemove,
+        onSelectFiles,
+        onToggleOverwrite,
+    };
+};
+
+const UploadView = ({ className, ...props }) => {
+    const state = useUploadView(props);
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__namespace["default"].createElement(UploadViewProvider, { ...state },
+            React__namespace["default"].createElement(ActionExitControl, null),
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                React__namespace["default"].createElement(OverwriteToggleControl, null),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__namespace["default"].createElement(AddFolderControl, null),
+                    React__namespace["default"].createElement(AddFilesControl, null))),
+            React__namespace["default"].createElement(DropZoneControl, null,
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                    React__namespace["default"].createElement(DataTableControl, null))),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__summary` },
+                React__namespace["default"].createElement(ActionDestinationControl, null),
+                React__namespace["default"].createElement(StatusDisplayControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                    React__namespace["default"].createElement(MessageControl, null)),
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__namespace["default"].createElement(ActionCancelControl, null),
+                    React__namespace["default"].createElement(ActionStartControl, null))))));
+};
+UploadView.displayName = 'UploadView';
+UploadView.Provider = UploadViewProvider;
+UploadView.AddFiles = AddFilesControl;
+UploadView.AddFolder = AddFolderControl;
+UploadView.Cancel = ActionCancelControl;
+UploadView.Destination = ActionDestinationControl;
+UploadView.DropZone = DropZoneControl;
+UploadView.Exit = ActionExitControl;
+UploadView.Message = MessageControl;
+UploadView.OverwriteToggle = OverwriteToggleControl;
+UploadView.Start = ActionStartControl;
+UploadView.Statuses = StatusDisplayControl;
+UploadView.TasksTable = DataTableControl;
+UploadView.Title = TitleControl;
+
+function useActionView() {
+    return {
+        isProcessing: false,
+        isProcessingComplete: false,
+        location: DEFAULT_STATE$1,
+        statusCounts: INITIAL_STATUS_COUNTS,
+        tasks: [],
+        onActionExit: () => null,
+        onActionStart: () => null,
+        onActionCancel: () => null,
+        onTaskRemove: () => null,
+    };
+}
+
+const LocationActionView = ({ type, ...props }) => {
+    const [{ actionType = type }] = useStore();
+    if (!isDefaultActionViewType(actionType))
+        return null;
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, actionType === 'createFolder' ? (React__namespace["default"].createElement(CreateFolderView, { ...props })) : actionType === 'delete' ? (React__namespace["default"].createElement(DeleteView, { ...props })) : actionType === 'copy' ? (React__namespace["default"].createElement(CopyView, { ...props })) : (React__namespace["default"].createElement(UploadView, { ...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 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 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 {
+            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 });
+};
+
+const PaginationControl = () => {
+    const { data } = useControlsContext();
+    const Resolved = useResolvedComposable(Pagination$1, 'Pagination');
+    return React__namespace["default"].createElement(Resolved, { ...data.paginationData });
+};
+
+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 DEFAULT_PAGE_SIZE$1 = 100;
+const DEFAULT_LIST_OPTIONS$1 = {
+    delimiter: '/',
+    pageSize: DEFAULT_PAGE_SIZE$1,
+};
+const listLocationItemsAction = createEnhancedListHandler(listLocationItemsHandler);
+const getDownloadErrorMessageFromFailedDownloadTask = (tasks) => {
+    if (!tasks.length) {
+        return undefined;
+    }
+    return `Failed to download ${tasks[0].data.fileKey ?? tasks[0].data.key} due to error: ${tasks[0].message}.`;
+};
+const useLocationDetailView = (options) => {
+    const getConfig = useGetActionInput();
+    const { initialValues, onExit, onNavigate } = options ?? {};
+    const listOptionsRef = React__namespace["default"].useRef({
+        ...DEFAULT_LIST_OPTIONS$1,
+        ...initialValues,
+    });
+    const listOptions = listOptionsRef.current;
+    const [{ location, locationItems }, dispatchStoreAction] = useStore();
+    const { current, key } = location;
+    const { permissions, prefix } = current ?? {};
+    const { fileDataItems } = locationItems;
+    const hasInvalidPrefix = ui.isUndefined(prefix);
+    const [downloadTaskResult, handleDownload] = useProcessTasks(downloadHandler);
+    const [{ data, isLoading, hasError, message }, handleList] = uiReactCore.useDataState(listLocationItemsAction, { items: [], nextToken: undefined });
+    // set up pagination
+    const { items, nextToken, search } = data;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const hasNextToken = !!nextToken;
+    const paginateCallback = () => {
+        if (hasInvalidPrefix || !nextToken)
+            return;
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, nextToken },
+        });
+    };
+    const { currentPage, onPaginate, handleReset, highestPageVisited, pageItems, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: listOptions.pageSize,
+        hasNextToken,
+    });
+    const onSearch = (query, includeSubfolders) => {
+        if (hasInvalidPrefix)
+            return;
+        const searchOptions = {
+            ...listOptions,
+            delimiter: includeSubfolders ? undefined : listOptions.delimiter,
+            search: {
+                query,
+                filterBy: 'key',
+                groupBy: includeSubfolders ? listOptions.delimiter : undefined,
+            },
+        };
+        handleReset();
+        handleList({ config: getConfig(), prefix: key, options: searchOptions });
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+    };
+    const { searchQuery, isSearchingSubfolders, onSearchQueryChange, onSearchSubmit, onToggleSearchSubfolders, resetSearch, } = useSearch({ onSearch });
+    const onRefresh = () => {
+        if (hasInvalidPrefix)
+            return;
+        handleReset();
+        resetSearch();
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, refresh: true },
+        });
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+    };
+    React__namespace["default"].useEffect(() => {
+        if (hasInvalidPrefix)
+            return;
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, refresh: true },
+        });
+        handleReset();
+    }, [
+        handleList,
+        handleReset,
+        listOptions,
+        hasInvalidPrefix,
+        getConfig,
+        prefix,
+        key,
+    ]);
+    // Logic for Select All Files functionality
+    const fileItems = React__namespace["default"].useMemo(() => pageItems.filter((item) => item.type === 'FILE'), [pageItems]);
+    const areAllFilesSelected = fileDataItems?.length === fileItems.length;
+    const shouldShowEmptyMessage = pageItems.length === 0 && !isLoading && !hasError;
+    const actions = React__namespace["default"].useMemo(() => {
+        if (!permissions) {
+            return [];
+        }
+        return Object.entries(defaultActionViewConfigs).map(([actionType, config]) => {
+            const { actionsListItemConfig } = config ?? {};
+            const { icon, hide, disable, label } = actionsListItemConfig ?? {};
+            return {
+                actionType,
+                icon,
+                isDisabled: ui.isFunction(disable)
+                    ? disable(fileDataItems)
+                    : disable ?? false,
+                isHidden: ui.isFunction(hide) ? hide(permissions) : hide,
+                label,
+            };
+        });
+    }, [fileDataItems, permissions]);
+    return {
+        actions,
+        page: currentPage,
+        pageItems,
+        location,
+        areAllFilesSelected,
+        fileDataItems,
+        hasFiles: fileItems.length > 0,
+        hasError,
+        hasDownloadError: downloadTaskResult.statusCounts.FAILED > 0,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        message,
+        downloadErrorMessage: getDownloadErrorMessageFromFailedDownloadTask(downloadTaskResult.tasks),
+        shouldShowEmptyMessage,
+        isLoading,
+        isSearchingSubfolders,
+        onPaginate,
+        searchQuery,
+        hasExhaustedSearch,
+        onRefresh,
+        onNavigate: (location, path) => {
+            onNavigate?.(location, path);
+            resetSearch();
+            dispatchStoreAction({ type: 'NAVIGATE', location, path });
+            dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        },
+        onDropFiles: (files) => {
+            dispatchStoreAction({ type: 'ADD_FILE_ITEMS', files });
+            const actionType = 'upload';
+            dispatchStoreAction({ type: 'SET_ACTION_TYPE', actionType });
+            options?.onActionSelect?.(actionType);
+        },
+        onDownload: (data) => {
+            handleDownload({ config: getConfig(), data });
+        },
+        onNavigateHome: () => {
+            onExit?.();
+            dispatchStoreAction({ type: 'RESET_LOCATION' });
+            handleList({
+                config: getConfig(),
+                // @todo: prefix should not be required to refresh
+                prefix: prefix ?? '',
+                options: { reset: true },
+            });
+            dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+            dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        },
+        onActionSelect: (actionType) => {
+            options?.onActionSelect?.(actionType);
+            dispatchStoreAction({ type: 'SET_ACTION_TYPE', actionType });
+        },
+        onSelect: (isSelected, fileItem) => {
+            dispatchStoreAction(isSelected
+                ? { type: 'REMOVE_LOCATION_ITEM', id: fileItem.id }
+                : { type: 'SET_LOCATION_ITEMS', items: [fileItem] });
+        },
+        onSelectAll: () => {
+            dispatchStoreAction(areAllFilesSelected
+                ? { type: 'RESET_LOCATION_ITEMS' }
+                : { type: 'SET_LOCATION_ITEMS', items: fileItems });
+        },
+        onSearch: onSearchSubmit,
+        onSearchClear: () => {
+            resetSearch();
+            if (hasInvalidPrefix)
+                return;
+            handleList({
+                config: getConfig(),
+                prefix: key,
+                options: { ...listOptions, refresh: true },
+            });
+            handleReset();
+        },
+        onSearchQueryChange,
+        onToggleSearchSubfolders,
+    };
+};
+
+const LOCATION_DETAIL_VIEW_HEADERS = [
+    { key: 'checkbox', type: 'text', content: { text: '' } },
+    { key: 'name', type: 'sort', content: { label: 'Name' } },
+    { key: 'type', type: 'sort', content: { label: 'Type' } },
+    { key: 'last-modified', type: 'sort', content: { label: 'Last modified' } },
+    { key: 'size', type: 'sort', content: { label: 'Size' } },
+    { key: 'download', type: 'text', content: { text: '' } },
+];
+
+const getFileRowContent = ({ permissions, isSelected, itemLocationKey, getDateDisplayValue, lastModified, rowId, rowKey, selectFileLabel, size, onDownload, onSelect, }) => LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => {
+    const key = `${columnKey}-${rowId}`;
+    switch (columnKey) {
+        case 'checkbox': {
+            return {
+                key,
+                type: 'checkbox',
+                content: {
+                    checked: isSelected,
+                    id: key,
+                    label: `${selectFileLabel} ${rowKey}`,
+                    onSelect,
+                },
+            };
+        }
+        case 'name': {
+            return {
+                key,
+                type: 'text',
+                content: {
+                    icon: 'file',
+                    ariaLabel: 'file',
+                    text: rowKey.slice(itemLocationKey.length),
+                },
+            };
+        }
+        case 'type': {
+            const splitKey = rowKey.split('.');
+            return {
+                key,
+                type: 'text',
+                content: {
+                    text: `${splitKey.length > 1 && splitKey[0] ? splitKey.pop() : '-'}`,
+                },
+            };
+        }
+        case 'last-modified': {
+            return {
+                key,
+                type: 'date',
+                content: {
+                    value: lastModified,
+                    displayValue: getDateDisplayValue(lastModified),
+                },
+            };
+        }
+        case 'size': {
+            return {
+                key,
+                type: 'number',
+                content: {
+                    value: size,
+                    displayValue: ui.humanFileSize(size, true),
+                },
+            };
+        }
+        case 'download': {
+            return permissions.includes('get')
+                ? {
+                    key,
+                    type: 'button',
+                    content: {
+                        icon: 'download',
+                        onClick: onDownload,
+                        ariaLabel: 'download',
+                    },
+                }
+                : { key, type: 'text', content: { text: '' } };
+        }
+    }
+});
+
+const getFolderRowContent = ({ itemSubPath, rowId, onNavigate, }) => LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => {
+    const key = `${columnKey}-${rowId}`;
+    switch (columnKey) {
+        case 'checkbox': {
+            return { key, type: 'text', content: { text: '' } };
+        }
+        case 'name': {
+            return {
+                key,
+                type: 'button',
+                content: {
+                    icon: 'folder',
+                    ariaLabel: itemSubPath,
+                    label: itemSubPath,
+                    onClick: onNavigate,
+                },
+            };
+        }
+        case 'type': {
+            return { key, type: 'text', content: { text: 'Folder' } };
+        }
+        case 'last-modified':
+        case 'size':
+        case 'download': {
+            return { key, type: 'text', content: { text: '' } };
+        }
+    }
+});
+
+const getLocationDetailViewTableData = ({ areAllFilesSelected, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
+    const headerCheckbox = {
+        key: 'checkbox',
+        type: 'checkbox',
+        content: {
+            checked: areAllFilesSelected,
+            label: selectAllFilesLabel,
+            onSelect: onSelectAll,
+            id: 'header-checkbox',
+        },
+    };
+    const headers = hasFiles
+        ? [headerCheckbox, ...LOCATION_DETAIL_VIEW_HEADERS.slice(1)]
+        : LOCATION_DETAIL_VIEW_HEADERS;
+    const rows = pageItems.map((locationItem) => {
+        const { id, key, type } = locationItem;
+        switch (type) {
+            case 'FILE': {
+                const { lastModified, size } = locationItem;
+                const { current, path } = location;
+                const isSelected = fileDataItems?.some((item) => item.id === id) ?? false;
+                const onFileDownload = () => {
+                    onDownload(createFileDataItem(locationItem));
+                };
+                const onFileSelect = () => {
+                    onSelect(isSelected, locationItem);
+                };
+                return {
+                    key: id,
+                    content: getFileRowContent({
+                        permissions: current?.permissions ?? [],
+                        isSelected,
+                        itemLocationKey: `${current?.prefix ?? ''}${path}`,
+                        lastModified,
+                        getDateDisplayValue,
+                        rowId: id,
+                        rowKey: key,
+                        selectFileLabel,
+                        size,
+                        onDownload: onFileDownload,
+                        onSelect: onFileSelect,
+                    }),
+                };
+            }
+            case 'FOLDER': {
+                const { current, path } = location;
+                const itemSubPath = key.slice(`${current?.prefix ?? ''}${path}`.length);
+                const itemLocationPath = key.slice(current?.prefix.length);
+                const onFolderNavigate = () => {
+                    if (!current) {
+                        return;
+                    }
+                    onNavigate({ ...current, id }, itemLocationPath);
+                };
+                return {
+                    key: id,
+                    content: getFolderRowContent({
+                        itemSubPath,
+                        rowId: id,
+                        onNavigate: onFolderNavigate,
+                    }),
+                };
+            }
+        }
+    });
+    return { headers, rows };
+};
+
+function LocationDetailViewProvider({ children, ...props }) {
+    const { LocationDetailView: { loadingIndicatorLabel, searchSubfoldersToggleLabel, selectFileLabel, selectAllFilesLabel, searchPlaceholder, searchSubmitLabel, searchClearLabel, getActionListItemLabel, getDateDisplayValue, getTitle, getListItemsResultMessage, }, } = useDisplayText();
+    const { actions, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchingSubfolders, location, areAllFilesSelected, fileDataItems, hasFiles, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, } = props;
+    const actionsWithDisplayText = actions.map((item) => ({
+        ...item,
+        label: getActionListItemLabel(item.label),
+    }));
+    const messageControlContent = getListItemsResultMessage({
+        isLoading,
+        items: pageItems,
+        hasError: hasError || hasDownloadError,
+        hasExhaustedSearch,
+        message: hasError ? message : downloadErrorMessage,
+    });
+    const isNoActionAvailable = !Array.isArray(actions) || actions?.every((action) => action.isHidden);
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            actions: actionsWithDisplayText,
+            isActionsListDisabled: isLoading || isNoActionAvailable,
+            isDataRefreshDisabled: isLoading,
+            isLoading,
+            isSearchingSubfolders,
+            loadingIndicatorLabel,
+            location,
+            paginationData: {
+                page,
+                hasNextPage,
+                highestPageVisited,
+                onPaginate,
+            },
+            searchPlaceholder,
+            searchSubfoldersToggleLabel,
+            searchSubmitLabel,
+            searchClearLabel,
+            searchQuery,
+            tableData: getLocationDetailViewTableData({
+                areAllFilesSelected,
+                location,
+                fileDataItems,
+                getDateDisplayValue,
+                hasFiles,
+                pageItems,
+                selectFileLabel,
+                selectAllFilesLabel,
+                onDownload,
+                onNavigate,
+                onSelect,
+                onSelectAll,
+            }),
+            title: getTitle(location),
+            message: messageControlContent,
+        }, onActionSelect: onActionSelect, onDropFiles: onDropFiles, onNavigate: onNavigate, onNavigateHome: onNavigateHome, onRefresh: onRefresh, onSearch: onSearch, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear, onToggleSearchSubfolders: onToggleSearchSubfolders }, children));
+}
+
+const LocationDetailView = ({ className, ...props }) => {
+    const state = useLocationDetailView(props);
+    const { hasError } = state;
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "LOCATION_DETAIL_VIEW" },
+        React__namespace["default"].createElement(LocationDetailViewProvider, { ...state },
+            React__namespace["default"].createElement(NavigationControl, null),
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
+                    React__namespace["default"].createElement(SearchControl, null),
+                    React__namespace["default"].createElement(SearchSubfoldersToggleControl, null)),
+                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)))),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__namespace["default"].createElement(MessageControl, null)))));
+};
+LocationDetailView.displayName = 'LocationDetailView';
+LocationDetailView.Provider = LocationDetailViewProvider;
+LocationDetailView.ActionsList = ActionsListControl;
+LocationDetailView.DropZone = DropZoneControl;
+LocationDetailView.LoadingIndicator = LoadingIndicatorControl;
+LocationDetailView.LocationItemsTable = DataTableControl;
+LocationDetailView.Message = MessageControl;
+LocationDetailView.Navigation = NavigationControl;
+LocationDetailView.Pagination = PaginationControl;
+LocationDetailView.Refresh = DataRefreshControl;
+LocationDetailView.Search = SearchControl;
+LocationDetailView.SearchSubfoldersToggle = SearchSubfoldersToggleControl;
+LocationDetailView.Title = TitleControl;
+
+const getHeaders = ({ hasObjectLocations, tableColumnActionsHeader, tableColumnBucketHeader, tableColumnFolderHeader, tableColumnPermissionsHeader, }) => {
+    const headers = [
+        {
+            key: 'folder',
+            type: 'sort',
+            content: { label: tableColumnFolderHeader },
+        },
+        {
+            key: 'bucket',
+            type: 'sort',
+            content: { label: tableColumnBucketHeader },
+        },
+        {
+            key: 'permission',
+            type: 'sort',
+            content: { label: tableColumnPermissionsHeader },
+        },
+    ];
+    if (hasObjectLocations) {
+        headers.push({
+            key: 'action',
+            type: 'sort',
+            content: { label: tableColumnActionsHeader },
+        });
+    }
+    return headers;
+};
+
+const getLocationsViewTableData = ({ displayText, pageItems, onNavigate, onDownload, }) => {
+    const { tableColumnActionsHeader, tableColumnBucketHeader, tableColumnFolderHeader, tableColumnPermissionsHeader, getDownloadLabel, getPermissionName, } = displayText;
+    const headers = getHeaders({
+        hasObjectLocations: pageItems.some(({ type }) => type === 'OBJECT'),
+        tableColumnActionsHeader,
+        tableColumnBucketHeader,
+        tableColumnFolderHeader,
+        tableColumnPermissionsHeader,
+    });
+    const rows = pageItems.map((location) => {
+        const { bucket, id, permissions, prefix } = location;
+        return {
+            key: id,
+            content: headers.map(({ key: columnKey }) => {
+                const key = `${columnKey}-${id}`;
+                switch (columnKey) {
+                    case 'bucket': {
+                        return { key, type: 'text', content: { text: bucket } };
+                    }
+                    case 'folder': {
+                        return location.type === 'OBJECT'
+                            ? {
+                                key,
+                                type: 'text',
+                                content: {
+                                    text: prefix,
+                                },
+                            }
+                            : {
+                                key,
+                                type: 'button',
+                                content: {
+                                    label: prefix || bucket,
+                                    onClick: () => {
+                                        onNavigate(location);
+                                    },
+                                },
+                            };
+                    }
+                    case 'permission': {
+                        return {
+                            key,
+                            type: 'text',
+                            content: { text: getPermissionName(permissions) },
+                        };
+                    }
+                    case 'action': {
+                        return location.type === 'OBJECT' &&
+                            location.permissions.includes('get')
+                            ? {
+                                key,
+                                type: 'button',
+                                content: {
+                                    icon: 'download',
+                                    ariaLabel: getDownloadLabel(location.prefix),
+                                    onClick: () => {
+                                        onDownload(location);
+                                    },
+                                },
+                            }
+                            : {
+                                key,
+                                type: 'text',
+                                content: { text: '' },
+                            };
+                    }
+                }
+            }),
+        };
+    });
+    return { headers, rows };
+};
+
+function LocationsViewProvider({ children, ...props }) {
+    const { LocationsView: displayText } = useDisplayText();
+    const { loadingIndicatorLabel, title, searchPlaceholder, searchSubmitLabel, searchClearLabel, getListLocationsResultMessage, } = displayText;
+    const { hasError, hasNextPage, highestPageVisited, page, isLoading, searchQuery, hasExhaustedSearch, pageItems, message, onDownload, onRefresh, onPaginate, onNavigate, onSearch, onSearchQueryChange, onSearchClear, } = props;
+    const messageControlContent = getListLocationsResultMessage({
+        hasExhaustedSearch,
+        isLoading,
+        locations: pageItems,
+        hasError,
+        message,
+    });
+    return (React__namespace["default"].createElement(ControlsContextProvider, { data: {
+            isDataRefreshDisabled: isLoading,
+            loadingIndicatorLabel,
+            tableData: getLocationsViewTableData({
+                displayText,
+                pageItems,
+                onDownload,
+                onNavigate,
+            }),
+            paginationData: {
+                page,
+                hasNextPage,
+                highestPageVisited,
+                onPaginate,
+            },
+            title,
+            searchPlaceholder,
+            searchClearLabel,
+            searchSubmitLabel,
+            searchQuery,
+            message: messageControlContent,
+            isLoading,
+        }, onSearch: onSearch, onRefresh: onRefresh, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear }, children));
+}
+
+const DEFAULT_EXCLUDE = {
+    exactPermissions: ['delete', 'write'],
+};
+const DEFAULT_PAGE_SIZE = 100;
+const DEFAULT_LIST_OPTIONS = {
+    exclude: DEFAULT_EXCLUDE,
+    pageSize: DEFAULT_PAGE_SIZE,
+};
+const useLocationsView = (options) => {
+    const getConfig = useGetActionInput();
+    const [state, handleList] = useListLocations();
+    const { data, message, hasError, isLoading } = state;
+    const [_, handleDownload] = useProcessTasks(downloadHandler);
+    const [, dispatchStoreAction] = useStore();
+    const { items, nextToken, search } = data;
+    const hasNextToken = !!nextToken;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const onNavigate = options?.onNavigate;
+    const initialValues = options?.initialValues ?? {};
+    const listOptionsRef = React__namespace["default"].useRef({
+        ...DEFAULT_LIST_OPTIONS,
+        ...initialValues,
+    });
+    const listOptions = listOptionsRef.current;
+    // initial load
+    React__namespace["default"].useEffect(() => {
+        handleList({
+            options: { ...listOptions, refresh: true },
+        });
+    }, [handleList, listOptions]);
+    // set up pagination
+    const paginateCallback = () => {
+        if (!nextToken)
+            return;
+        handleList({
+            options: { ...listOptions, nextToken },
+        });
+    };
+    const { currentPage, onPaginate, handleReset, highestPageVisited, pageItems, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: listOptions.pageSize,
+        hasNextToken,
+    });
+    const onSearch = (query) => {
+        handleReset();
+        handleList({
+            options: {
+                ...listOptions,
+                search: {
+                    query,
+                    filterBy: (location) => {
+                        return location.prefix ? 'prefix' : 'bucket';
+                    },
+                },
+            },
+        });
+    };
+    const { searchQuery, onSearchQueryChange, onSearchSubmit, resetSearch } = useSearch({ onSearch });
+    const shouldShowEmptyMessage = pageItems.length === 0 && !isLoading && !hasError;
+    return {
+        isLoading,
+        hasError,
+        message,
+        page: currentPage,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        pageItems,
+        shouldShowEmptyMessage,
+        searchQuery,
+        hasExhaustedSearch,
+        onDownload: (location) => {
+            handleDownload({
+                config: getConfig(location),
+                data: createFileDataItemFromLocation(location),
+            });
+        },
+        onNavigate: (location) => {
+            onNavigate?.(location);
+            dispatchStoreAction({ type: 'NAVIGATE', location });
+        },
+        onRefresh: () => {
+            resetSearch();
+            handleReset();
+            handleList({
+                options: { ...listOptions, refresh: true },
+            });
+        },
+        onPaginate,
+        onSearch: onSearchSubmit,
+        onSearchQueryChange,
+        onSearchClear: () => {
+            resetSearch();
+            handleReset();
+            handleList({
+                options: { ...listOptions, refresh: true },
+            });
+        },
+    };
+};
+
+const LocationsView = ({ className, ...props }) => {
+    const state = useLocationsView(props);
+    const { hasError } = state;
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "LOCATIONS_VIEW" },
+        React__namespace["default"].createElement(LocationsViewProvider, { ...state },
+            React__namespace["default"].createElement(TitleControl, null),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
+                    React__namespace["default"].createElement(SearchControl, null)),
+                React__namespace["default"].createElement(PaginationControl, null),
+                React__namespace["default"].createElement(DataRefreshControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__namespace["default"].createElement(LoadingIndicatorControl, null),
+                hasError ? null : React__namespace["default"].createElement(DataTableControl, null)),
+            React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                React__namespace["default"].createElement(MessageControl, null)))));
+};
+LocationsView.displayName = 'LocationsView';
+LocationsView.Provider = LocationsViewProvider;
+LocationsView.LoadingIndicator = LoadingIndicatorControl;
+LocationsView.LocationsTable = DataTableControl;
+LocationsView.Message = MessageControl;
+LocationsView.Pagination = PaginationControl;
+LocationsView.Refresh = DataRefreshControl;
+LocationsView.Search = SearchControl;
+LocationsView.Title = TitleControl;
+
+const ERROR_MESSAGE = '`useViews` must be called from within a `ViewsProvider`';
+const ViewsContext = React__namespace["default"].createContext(undefined);
+function ViewsProvider({ children, views, }) {
+    // destructure `views` to prevent extraneous rerender of components in the
+    // scenario of an unstable reference provided as `views`
+    const { LocationDetailView: LocationDetailView$1, LocationActionView: LocationActionView$1, LocationsView: LocationsView$1 } = views ?? {};
+    const value = React__namespace["default"].useMemo(() => ({
+        LocationActionView: LocationActionView$1 ?? LocationActionView,
+        LocationDetailView: LocationDetailView$1 ?? LocationDetailView,
+        LocationsView: LocationsView$1 ?? LocationsView,
+    }), [LocationDetailView$1, LocationActionView$1, LocationsView$1]);
+    return (React__namespace["default"].createElement(ViewsContext.Provider, { value: value }, children));
+}
+function useViews() {
+    const context = React__namespace["default"].useContext(ViewsContext);
+    if (!context) {
+        throw new Error(ERROR_MESSAGE);
+    }
+    return context;
+}
+
+/**
+ * Handles default `StorageBrowser` behavior:
+ * - render `LocationsView` on init
+ * - render `LocationDetailView` on location selection
+ * - render `ActionView` on action selection
+ */
+function StorageBrowserDefault() {
+    const { LocationActionView, LocationDetailView, LocationsView } = useViews();
+    const [{ actionType, location }] = useStore();
+    const { current } = location;
+    if (actionType) {
+        return React__namespace["default"].createElement(LocationActionView, null);
+    }
+    if (current) {
+        return React__namespace["default"].createElement(LocationDetailView, null);
+    }
+    return React__namespace["default"].createElement(LocationsView, null);
+}
+
+const DEFAULT_USE_VIEWS = {
+    CopyView: useCopyView,
+    CreateFolderView: useCreateFolderView,
+    DeleteView: useDeleteView,
+    LocationDetailView: useLocationDetailView,
+    LocationsView: useLocationsView,
+    UploadView: useUploadView,
+};
+const isDefaultUseViewName = (viewName) => Object.keys(DEFAULT_USE_VIEWS).some((key) => key === viewName);
+const createUseView = (configs) => {
+    const hooks = Object.values(configs).reduce((out, { componentName }) => ({
+        ...out,
+        [componentName.slice(0, -4)]: isDefaultUseViewName(componentName)
+            ? DEFAULT_USE_VIEWS[componentName]
+            : useActionView,
+    }), {});
+    return function useView(type) {
+        // todo: add assertion here
+        return hooks[type](type);
+    };
+};
+
+function createStorageBrowser(input) {
+    assertRegisterAuthListener(input.config.registerAuthListener);
+    const { accountId, customEndpoint, registerAuthListener, getLocationCredentials, region, } = input.config;
+    const ConfigurationProvider = createConfigurationProvider({
+        accountId,
+        actions: {
+            ...defaultActionConfigs,
+            // @ts-expect-error To be addressed with line 40
+            listLocations: {
+                componentName: 'LocationsView',
+                handler: input.config.listLocations,
+            },
+        },
+        customEndpoint,
+        displayName: 'ConfigurationProvider',
+        getLocationCredentials,
+        region,
+        registerAuthListener,
+    });
+    const composables = {
+        // fallback composables
+        ...DEFAULT_COMPOSABLES,
+        // default components
+        ...componentsDefault,
+        // override components
+        ...input.components,
+    };
+    /**
+     * Provides state, configuration and action values that are shared between
+     * the primary View components
+     */
+    function Provider({ children, ...props }) {
+        return (React__namespace["default"].createElement(StoreProvider, { ...props },
+            React__namespace["default"].createElement(ConfigurationProvider, null,
+                React__namespace["default"].createElement(DisplayTextProvider, { displayText: props.displayText },
+                    React__namespace["default"].createElement(ComponentsProvider, { composables: composables, elements: elementsDefault }, children)))));
+    }
+    const StorageBrowser = ({ views, displayText }) => (React__namespace["default"].createElement(ErrorBoundary, null,
+        React__namespace["default"].createElement(Provider, { displayText: displayText },
+            React__namespace["default"].createElement(ViewsProvider, { views: views },
+                React__namespace["default"].createElement(StorageBrowserDefault, null)))));
+    StorageBrowser.LocationActionView = LocationActionView;
+    StorageBrowser.LocationDetailView = LocationDetailView;
+    StorageBrowser.LocationsView = LocationsView;
+    StorageBrowser.CopyView = CopyView;
+    StorageBrowser.CreateFolderView = CreateFolderView;
+    StorageBrowser.DeleteView = DeleteView;
+    StorageBrowser.UploadView = UploadView;
+    StorageBrowser.Provider = Provider;
+    StorageBrowser.displayName = 'StorageBrowser';
+    const useView = createUseView(defaultActionConfigs);
+    return { StorageBrowser, useView };
+}
+
+const toAccessGrantPermission = (permission) => {
+    let result = '';
+    permission.forEach((access) => {
+        if (['read', 'get', 'list'].includes(access)) {
+            if (!result.includes('READ')) {
+                result = 'READ' + result;
+            }
+        }
+        if (['write', 'delete'].includes(access)) {
+            if (!result.includes('WRITE')) {
+                result += 'WRITE';
+            }
+        }
+    });
+    if (result === '') {
+        throw new Error('Improper Permission: Please provide correct permission.');
+    }
+    return result;
+};
+const parseAmplifyAuthPermission = (permissions) => {
+    const result = [];
+    permissions.forEach((access) => {
+        if (access === 'read') {
+            if (!result.includes('list')) {
+                result.push('list');
+            }
+            if (!result.includes('get')) {
+                result.push('get');
+            }
+        }
+        else if (['delete', 'get', 'list', 'write'].includes(access) &&
+            !result.includes(access)) {
+            result.push(access);
+        }
+    });
+    if (result.length === 0) {
+        throw new Error('Improper Permission: Please provide correct permission.');
+    }
+    return result.sort();
+};
+
+const getPaginatedLocations = ({ items, pageSize, nextToken, }) => {
+    if (pageSize) {
+        if (nextToken) {
+            if (Number(nextToken) > items.length) {
+                return { items: [], nextToken: undefined };
+            }
+            const start = -nextToken;
+            const end = start + pageSize < 0 ? start + pageSize : undefined;
+            return {
+                items: items.slice(start, end),
+                nextToken: end ? `${-end}` : undefined,
+            };
+        }
+        return {
+            items: items.slice(0, pageSize),
+            nextToken: items.length > pageSize ? `${items.length - pageSize}` : undefined,
+        };
+    }
+    return { items, nextToken: undefined };
+};
+
+const createAmplifyListLocationsHandler = () => {
+    let cachedItems = [];
+    return async function listLocations(input) {
+        const { options } = input ?? {};
+        const { nextToken, pageSize } = options ?? {};
+        if (cachedItems.length > 0) {
+            return getPaginatedLocations({
+                items: cachedItems,
+                pageSize,
+                nextToken,
+            });
+        }
+        const { locations } = await internals.listPaths();
+        const sanitizedItems = locations.map(({ bucket, permission, prefix, type }) => {
+            return {
+                type,
+                permissions: parseAmplifyAuthPermission(permission),
+                bucket,
+                prefix: prefix.endsWith('*') ? prefix.slice(0, -1) : prefix,
+                id: crypto.randomUUID(),
+            };
+        });
+        cachedItems = sanitizedItems;
+        return getPaginatedLocations({
+            items: cachedItems,
+            pageSize,
+            nextToken,
+        });
+    };
+};
+
+const MISSING_BUCKET_OR_REGION_ERROR = 'Amplify Storage configuration not found. Did you run `Amplify.configure` from your project root?';
+const MISSING_IDENTITY_ID_ERROR = '`identityId` not found.';
+const MISSING_TEMPORARY_CREDENTIALS_ERROR = 'Temporary Auth `credentials` not found.';
+const isTemporaryCredentials = (value) => !!value?.sessionToken || !!value?.expiration;
+const createAmplifyAuthAdapter = () => {
+    const { bucket, region } = awsAmplify.Amplify.getConfig()?.Storage?.S3 ?? {};
+    if (!bucket || !region) {
+        throw new Error(MISSING_BUCKET_OR_REGION_ERROR);
+    }
+    const listLocations = createAmplifyListLocationsHandler();
+    const getLocationCredentials = async () => {
+        const { credentials, identityId } = await auth.fetchAuthSession();
+        if (!isTemporaryCredentials(credentials)) {
+            throw new Error(MISSING_TEMPORARY_CREDENTIALS_ERROR);
+        }
+        if (!identityId) {
+            throw new Error(MISSING_IDENTITY_ID_ERROR);
+        }
+        return { credentials, identityId };
+    };
+    const registerAuthListener = (onStateChange) => {
+        const remove = utils.Hub.listen('auth', (data) => {
+            if (data.payload.event === 'signedOut') {
+                onStateChange();
+                remove();
+            }
+        });
+    };
+    return {
+        getLocationCredentials,
+        listLocations,
+        registerAuthListener,
+        region,
+    };
+};
+
+exports.componentsDefault = componentsDefault;
+exports.createAmplifyAuthAdapter = createAmplifyAuthAdapter;
+exports.createStorageBrowser = createStorageBrowser;
+exports.listLocationsHandler = listLocationsHandler;
+exports.toAccessGrantPermission = toAccessGrantPermission;