@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/ErrorSummary-DDz7nQWX.js

@@ -0,0 +1,166 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), 
+require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js"), colors = require("./colors-hDzzq_Dk.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), css = {
+    wrapper: "ErrorSummary-module_wrapper__5DYoJ",
+    clip: "ErrorSummary-module_clip__aYLlV",
+    panel: "ErrorSummary-module_panel__12hXb",
+    entries: "ErrorSummary-module_entries__JCjhH",
+    entry: "ErrorSummary-module_entry__uRdYy",
+    title: "ErrorSummary-module_title__Wj3EC",
+    field: "ErrorSummary-module_field__B-hUn",
+    messages: "ErrorSummary-module_messages__vcGY5",
+    xs: "ErrorSummary-module_xs__pTqMn type-module_body-xs-regular__ZAFft",
+    s: "ErrorSummary-module_s__u2sIP type-module_body-s-regular__vRHSP",
+    m: "ErrorSummary-module_m__-QyP- type-module_body-m-regular__LuQBA",
+    l: "ErrorSummary-module_l__bb1xZ type-module_body-l-regular__lOYbg",
+    xl: "ErrorSummary-module_xl__SaVRd type-module_body-xl-regular__pF2kC"
+};
+
+function uniqueKey(value, counts) {
+    var _a;
+    const occurrence = null !== (_a = counts.get(value)) && void 0 !== _a ? _a : 0;
+    return counts.set(value, occurrence + 1), JSON.stringify([ value, occurrence ]);
+}
+
+const defaultMotionValues = {
+    initial: {
+        height: 0,
+        opacity: 0
+    },
+    animate: {
+        height: "auto",
+        opacity: 1
+    },
+    exit: {
+        height: 0,
+        opacity: 0
+    }
+};
+
+function AnimatedSummary({children: children, transition: transition, motionValues: motionValues}) {
+    const [isPresent, safeToRemove] = react.usePresence(), reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion(), controls = react.useAnimationControls(), variants = React.useMemo(() => {
+        const merged = Object.assign(Object.assign({}, defaultMotionValues), motionValues);
+        for (const state of [ "initial", "animate", "exit" ]) {
+            const override = null == motionValues ? void 0 : motionValues[state];
+            override && "function" != typeof override && (merged[state] = Object.assign(Object.assign({}, defaultMotionValues[state]), override));
+        }
+        return merged;
+    }, [ motionValues ]);
+    return React.useEffect(() => {
+        if (reducedMotion) return void (isPresent || null == safeToRemove || safeToRemove());
+        let active = !0;
+        const state = isPresent ? "animate" : "exit", target = variants[state], definition = "function" == typeof target ? state : target;
+        return controls.start(definition, transition).then(() => {
+            active && !isPresent && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, controls.stop();
+        };
+    }, [ controls, isPresent, reducedMotion, safeToRemove, transition, variants ]), 
+    reducedMotion ? isPresent ? jsxRuntime.jsx("div", {
+        className: css.clip,
+        children: children
+    }) : null : jsxRuntime.jsx(react.motion.div, {
+        className: css.clip,
+        inert: !isPresent || void 0,
+        "aria-hidden": !isPresent || void 0,
+        initial: "initial",
+        animate: controls,
+        variants: variants,
+        transition: transition,
+        children: children
+    });
+}
+
+const ErrorSummaryComponent = React.forwardRef((rawProps, ref) => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {current: current} = hooks_useTheme.useTheme(), reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion(), warning = current.colors["feedback-warning"], {entries: entries, announcement: announcement = "polite", summaryName: summaryName = "Errors to review", textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor = colors.addOpacity(warning, .1), borderColor: borderColor = warning, borderWidth: borderWidth = 1, borderRadius: borderRadius = "var(--corner-xs)", padding: padding = "var(--spacing-m)", gap: gap = "var(--spacing-xs)", transition: transition, motionValues: motionValues, className: className, style: style, tabIndex: tabIndex} = props, attributes = tslib_es6.__rest(props, [ "entries", "announcement", "summaryName", "textSize", "textColor", "backgroundColor", "borderColor", "borderWidth", "borderRadius", "padding", "gap", "transition", "motionValues", "className", "style", "tabIndex" ]), timing = React.useMemo(() => getWaterTransition.getWaterTransition(current.motion, transition), [ current.motion, transition ]), hasEntries = Boolean(null == entries ? void 0 : entries.length), entryCounts = new Map, content = null == entries ? void 0 : entries.map(entry => {
+        var _a, _b;
+        const key = uniqueKey(null !== (_b = null !== (_a = entry.id) && void 0 !== _a ? _a : entry.fieldName) && void 0 !== _b ? _b : entry.title, entryCounts), messageCounts = new Map, messages = (() => {
+            var _a;
+            return Array.isArray(entry.message) ? entry.message.filter(message => message.trim()) : (null === (_a = entry.message) || void 0 === _a ? void 0 : _a.trim()) ? [ entry.message ] : [];
+        })();
+        return jsxRuntime.jsxs("li", {
+            className: css.entry,
+            children: [ entry.fieldName ? jsxRuntime.jsx("button", {
+                className: css.field,
+                type: "button",
+                onClick: event => {
+                    var _a;
+                    return ((event, name) => {
+                        var _a, _b;
+                        const summary = event.currentTarget.closest("[data-error-summary]"), controls = (null !== (_a = null == summary ? void 0 : summary.closest("form")) && void 0 !== _a ? _a : event.currentTarget.ownerDocument).querySelectorAll("input[name], select[name], textarea[name]"), target = Array.from(controls).find(control => {
+                            var _a;
+                            if (control.name !== name || control.matches(':disabled, input[type="hidden"]')) return !1;
+                            if (!control.getClientRects().length || control.closest("[inert]")) return !1;
+                            const visibility = null === (_a = control.ownerDocument.defaultView) || void 0 === _a ? void 0 : _a.getComputedStyle(control).visibility;
+                            return "hidden" !== visibility && "collapse" !== visibility;
+                        });
+                        target && (target.focus({
+                            preventScroll: !0
+                        }), (null !== (_b = target.parentElement) && void 0 !== _b ? _b : target).scrollIntoView({
+                            block: "center",
+                            behavior: reducedMotion ? "instant" : "smooth"
+                        }));
+                    })(event, null !== (_a = entry.fieldName) && void 0 !== _a ? _a : "");
+                },
+                children: entry.title
+            }) : jsxRuntime.jsx("strong", {
+                className: css.title,
+                children: entry.title
+            }), messages.length > 0 && jsxRuntime.jsx("ul", {
+                className: css.messages,
+                children: messages.map(message => jsxRuntime.jsx("li", {
+                    children: message
+                }, uniqueKey(message, messageCounts)))
+            }) ]
+        }, key);
+    }), cssVars = {
+        "--error-text-color": textColor,
+        "--error-bg-color": backgroundColor,
+        "--error-border-color": borderColor,
+        "--error-border-width": misc.setStyle(borderWidth),
+        "--error-border-radius": misc.setStyle(borderRadius),
+        "--error-padding": misc.setStyle(padding),
+        "--error-gap": misc.setStyle(gap)
+    };
+    return jsxRuntime.jsx("div", Object.assign({}, (attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)))(attributes), {
+        ref: ref,
+        className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        "data-error-summary": "",
+        role: "off" === announcement ? "region" : "assertive" === announcement ? "alert" : "status",
+        "aria-label": summaryName.trim() || "Errors to review",
+        "aria-live": announcement,
+        "aria-atomic": "off" !== announcement || void 0,
+        tabIndex: hasEntries ? null != tabIndex ? tabIndex : -1 : void 0,
+        children: jsxRuntime.jsx(react.AnimatePresence, {
+            children: hasEntries && jsxRuntime.jsx(AnimatedSummary, {
+                transition: timing,
+                motionValues: motionValues,
+                children: jsxRuntime.jsx("div", {
+                    className: `${css.panel} ${css[textSize]}`,
+                    children: jsxRuntime.jsx("ul", {
+                        className: css.entries,
+                        children: content
+                    })
+                })
+            }, "summary")
+        })
+    }));
+});
+
+ErrorSummaryComponent.displayName = "ErrorSummary";
+
+const ErrorSummary = React.memo(ErrorSummaryComponent);
+
+exports.ErrorSummary = ErrorSummary;

package/dist/cjs/chunks/{FileIcon-DctPd_KB.js → FileIcon-BM8n3o-c.js}

@@ -1,18 +1,12 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DL37Dyu4.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var FileIconTypes, tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js"), misc = require("./misc-PmT7cZzC.js"), files = require("./files-RYD9L_pI.js"), css_icon = "FileIcon-module_icon__eHSAn";
 
-require("../theme/colors.js"), require("../theme/type.js");
-
-var FileIconNames, misc = require("./misc-B3tF47Um.js");
-
-require("./broadcastChannel-BV0gIfvH.js"), require("./webRTCStore-B8IKsBKT.js"), 
-require("./microphoneStore-Dw-7f6Jb.js"), require("./volumeStore-BQIMqtSw.js"), 
-require("../hooks/useWindow.js"), exports.FileIconNames = void 0, (FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
-FileIconNames.text = "text", FileIconNames.sheet = "sheet", FileIconNames.preso = "preso", 
-FileIconNames.md = "md", FileIconNames.code = "code", FileIconNames.image = "image", 
-FileIconNames.audio = "audio", FileIconNames.video = "video", FileIconNames.other = "other";
+exports.FileIconTypes = void 0, (FileIconTypes = exports.FileIconTypes || (exports.FileIconTypes = {})).pdf = "pdf", 
+FileIconTypes.text = "text", FileIconTypes.sheet = "sheet", FileIconTypes.preso = "preso", 
+FileIconTypes.md = "md", FileIconTypes.code = "code", FileIconTypes.image = "image", 
+FileIconTypes.audio = "audio", FileIconTypes.video = "video", FileIconTypes.other = "other";
 
 const iconColorSchemes = {
     blue: {
@@ -188,37 +182,71 @@ const iconColorSchemes = {
             fill: "#fff"
         }) ]
     })
-} ] ]), FileIcon = React.memo(props => {
-    const {isDark: isDark} = hooks_useTheme.useTheme(), {name: name = "pdf", size: size = 24, pointer: pointer = !1, disabled: disabled = !1, onClick: onClick} = props, svgAttributes = tslib_es6.__rest(props, [ "name", "size", "pointer", "disabled", "onClick" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = tslib_es6.__rest(svgAttributes, [ "id", "className", "style" ]), svgStyle = null != style ? style : {}, cursor = React.useMemo(() => disabled ? "default" : pointer ? "pointer" : "inherit", [ disabled, pointer ]), iconStyle = React.useMemo(() => ({
-        cursor: cursor,
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        WebkitTapHighlightColor: "transparent",
-        outline: "none",
-        border: 0
-    }), [ cursor ]), handleClick = React.useCallback(e => {
-        disabled || null == onClick || onClick(e);
-    }, [ onClick, disabled ]), definition = STATIC_FILE_ICONS.get(name), paths = null == definition ? void 0 : definition.paths(isDark ? "dark" : "light");
-    return paths ? jsxRuntime.jsxs("svg", Object.assign({
-        id: svgId,
-        className: className,
+} ] ]), labels = {
+    pdf: "PDF file",
+    text: "Text document",
+    sheet: "Spreadsheet",
+    preso: "Presentation",
+    md: "Markdown file",
+    code: "Code file",
+    image: "Image file",
+    audio: "Audio file",
+    video: "Video file",
+    other: "File"
+}, FileIconBase = React.forwardRef((props, ref) => {
+    const {isDark: isDark} = hooks_useTheme.useTheme(), {type: type, filename: filename, size: size = 24, pointer: pointer, disabled: disabled = !1, label: label, decorative: decorative = !1, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, "aria-label": ariaLabel, className: className, style: style} = props, attributes = tslib_es6.__rest(props, [ "type", "filename", "size", "pointer", "disabled", "label", "decorative", "onClick", "onKeyDown", "onKeyUp", "onBlur", "aria-label", "className", "style" ]), inferred = null != type ? type : files.resolveFileIconType(filename), category = STATIC_FILE_ICONS.has(inferred) ? inferred : "other", definition = STATIC_FILE_ICONS.get(category), interactive = Boolean(onClick), hidden = decorative && !interactive, spacePressed = React.useRef(!1), resolvedSize = Number.isFinite(size) && size > 0 ? size : 24, accessibleName = (null == label ? void 0 : label.trim()) || (null == ariaLabel ? void 0 : ariaLabel.trim()) || labels[category], activate = event => {
+        const view = event.currentTarget.ownerDocument.defaultView;
+        view && event.currentTarget.dispatchEvent(new view.MouseEvent("click", {
+            bubbles: !0,
+            cancelable: !0,
+            view: view,
+            detail: 0,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey
+        }));
+    };
+    return jsxRuntime.jsx("svg", Object.assign({}, attributes, {
+        ref: ref,
         xmlns: "http://www.w3.org/2000/svg",
-        width: size,
-        height: size,
+        width: resolvedSize,
+        height: resolvedSize,
         viewBox: "0 0 20 20",
-        style: Object.assign(Object.assign({}, svgStyle), iconStyle),
-        onClick: handleClick,
-        role: pointer ? "button" : "img",
-        "aria-label": `${name} icon`,
-        "aria-disabled": pointer ? disabled : void 0,
-        tabIndex: pointer && !disabled ? 0 : -1,
-        onKeyDown: e => {
-            pointer && !disabled && misc.accessibleKeyDown(e, () => handleClick(e));
+        className: misc.classNames(css_icon, null != className ? className : ""),
+        style: Object.assign(Object.assign({}, style), {
+            cursor: disabled ? "default" : !1 === pointer ? "inherit" : pointer || interactive ? "pointer" : "inherit",
+            opacity: disabled ? .5 : null == style ? void 0 : style.opacity
+        }),
+        role: interactive ? "button" : "img",
+        "aria-label": hidden ? void 0 : accessibleName,
+        "aria-hidden": hidden || void 0,
+        "aria-disabled": interactive ? disabled : void 0,
+        tabIndex: interactive && !disabled ? 0 : void 0,
+        focusable: interactive && !disabled ? "true" : "false",
+        onClick: event => {
+            if (disabled) return event.preventDefault(), void event.stopPropagation();
+            event.defaultPrevented || null == onClick || onClick(event);
+        },
+        onKeyDown: event => {
+            disabled || (null == onKeyDown || onKeyDown(event), interactive && !event.defaultPrevented && ("Enter" === event.key && (event.preventDefault(), 
+            event.repeat || activate(event)), " " === event.key && (event.preventDefault(), 
+            spacePressed.current = !0)));
+        },
+        onKeyUp: event => {
+            const pressed = spacePressed.current;
+            spacePressed.current = !1, disabled || (null == onKeyUp || onKeyUp(event), interactive && !event.defaultPrevented && " " === event.key && pressed && (event.preventDefault(), 
+            activate(event)));
         },
-        opacity: disabled ? .5 : 1
-    }, rest, {
-        children: [ jsxRuntime.jsx("title", {}), paths ]
-    })) : null;
+        onBlur: event => {
+            spacePressed.current = !1, null == onBlur || onBlur(event);
+        },
+        children: null == definition ? void 0 : definition.paths(isDark ? "dark" : "light")
+    }));
 });
 
-FileIcon.displayName = "FileIcon", exports.FileIcon = FileIcon;
+FileIconBase.displayName = "FileIcon";
+
+const FileIcon = React.memo(FileIconBase);
+
+exports.FileIcon = FileIcon;

package/dist/cjs/chunks/FileList-T2_mhI_t.js

@@ -0,0 +1,204 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), Attachment = require("./Attachment-DhyXAQUf.js"), FileIcon = require("./FileIcon-BM8n3o-c.js"), Icon = require("./Icon-COY7IZkK.js"), ProgressIndicator = require("./ProgressIndicator-Ddj5dfEA.js"), css = {
+    wrapper: "FileList-module_wrapper__9-rrl",
+    file: "FileList-module_file__61dkh",
+    fileName: "FileList-module_fileName__amame",
+    meta: "FileList-module_meta__unbpG flexBox-module_columnStart__C7P44",
+    status: "FileList-module_status__H1s6f type-module_body-xs-regular__ZAFft",
+    error: "FileList-module_error__UZ4-T",
+    fileIcon: "FileList-module_fileIcon__xDWW8 flexBox-module_row__z24tF",
+    progress: "FileList-module_progress__7l-z1",
+    remove: "FileList-module_remove__JbY1x",
+    xs: "FileList-module_xs__i2S-5 type-module_body-xs-regular__ZAFft",
+    s: "FileList-module_s__4q0ae type-module_body-s-regular__vRHSP",
+    m: "FileList-module_m__hWqBx type-module_body-m-regular__LuQBA",
+    l: "FileList-module_l__tHDNp type-module_body-l-regular__lOYbg",
+    xl: "FileList-module_xl__fxW11 type-module_body-xl-regular__pF2kC",
+    attachment: "FileList-module_attachment__z9l9y"
+};
+
+function FileRow({item: item, canRemove: canRemove, iconSize: iconSize, textSize: textSize, onRemove: onRemove, onToolTip: onToolTip}) {
+    const name = "string" == typeof item.file ? item.file : item.file.name, progress = Attachment.fileProgress(item), removable = canRemove && !item.uploading, tooltip = React.useRef({
+        hovered: !1,
+        focused: !1,
+        shown: !1
+    });
+    React.useEffect(() => (removable || (tooltip.current = {
+        hovered: !1,
+        focused: !1,
+        shown: !1
+    }), () => {
+        tooltip.current.shown && (null == onToolTip || onToolTip(null)), tooltip.current.shown = !1;
+    }), [ onToolTip, removable ]);
+    const updateTip = button => {
+        const state = tooltip.current;
+        state.hovered || state.focused ? !state.shown && onToolTip && (state.shown = !0, 
+        onToolTip({
+            payload: {
+                label: `Remove file ${name}`
+            },
+            ref: {
+                current: button
+            }
+        })) : state.shown && (state.shown = !1, null == onToolTip || onToolTip(null));
+    }, style = {
+        "--file-progress": `${null != progress ? progress : 0}%`,
+        "--file-row-right": removable ? "calc(var(--file-row-horizontal, var(--spacing-xs)) - var(--file-row-adjustment, var(--spacing-xxs)))" : "var(--file-row-horizontal, var(--spacing-xs))",
+        "--file-border-color": item.error ? "var(--feedback-warning)" : "var(--core-outline-primary)"
+    };
+    return jsxRuntime.jsxs("div", {
+        role: "listitem",
+        className: `${css.file} ${css[textSize]}`,
+        style: style,
+        children: [ jsxRuntime.jsx("div", {
+            className: css.fileIcon,
+            children: jsxRuntime.jsx(FileIcon.FileIcon, {
+                filename: item.file,
+                size: iconSize,
+                decorative: !0
+            })
+        }), jsxRuntime.jsxs("div", {
+            className: css.meta,
+            children: [ jsxRuntime.jsx("div", {
+                className: css.fileName,
+                title: name,
+                children: name
+            }), item.error && jsxRuntime.jsxs("div", {
+                className: `${css.status} ${css.error}`,
+                role: "alert",
+                children: [ name, ": ", item.error ]
+            }) ]
+        }), item.uploading && jsxRuntime.jsx("div", {
+            className: css.progress,
+            role: "progressbar",
+            tabIndex: -1,
+            "aria-label": `Uploading ${name}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progress,
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                decorative: !0,
+                inline: !0,
+                size: 20,
+                show: !0
+            })
+        }), removable && jsxRuntime.jsx("button", {
+            type: "button",
+            className: css.remove,
+            "aria-label": `Remove file ${name}`,
+            onMouseEnter: e => {
+                tooltip.current.hovered = !0, updateTip(e.currentTarget);
+            },
+            onMouseLeave: e => {
+                tooltip.current.hovered = !1, updateTip(e.currentTarget);
+            },
+            onFocus: e => {
+                tooltip.current.focused = !0, updateTip(e.currentTarget);
+            },
+            onBlur: e => {
+                tooltip.current.focused = !1, updateTip(e.currentTarget);
+            },
+            onClick: e => {
+                tooltip.current.shown && (null == onToolTip || onToolTip(null)), tooltip.current = {
+                    hovered: !1,
+                    focused: !1,
+                    shown: !1
+                }, onRemove(e.currentTarget);
+            },
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: "basic.cross",
+                "aria-hidden": "true"
+            })
+        }) ]
+    });
+}
+
+const FileListBase = React.forwardRef((rawProps, ref) => {
+    const _a = resolveColorProps.resolveColorProps(rawProps), {files: files = [], variant: variant = "list", attachmentSize: attachmentSize, onChange: onChange, onToolTip: onToolTip, listName: listName = "Files", maxWidth: maxWidth, minWidth: minWidth, direction: direction = "row", padding: padding, gap: gap = 10, textSize: textSize = "s", iconSize: iconSize, backgroundColor: backgroundColor, canRemove: canRemove = !0, className: className, style: style} = _a, attributes = tslib_es6.__rest(_a, [ "files", "variant", "attachmentSize", "onChange", "onToolTip", "listName", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "canRemove", "className", "style" ]), root = React.useRef(null), setRoot = React.useCallback(node => {
+        if (root.current = node, "function" == typeof ref) return ref(node);
+        ref && (ref.current = node);
+    }, [ ref ]), focusAfterRemoval = React.useRef(void 0);
+    React.useLayoutEffect(() => {
+        var _a, _b;
+        const pending = focusAfterRemoval.current;
+        if (!pending || pending.removed.isConnected) return;
+        focusAfterRemoval.current = void 0;
+        const document = pending.removed.ownerDocument;
+        document.activeElement !== document.body && document.activeElement !== pending.removed || ((null === (_a = pending.next) || void 0 === _a ? void 0 : _a.isConnected) ? pending.next.focus() : null === (_b = root.current) || void 0 === _b || _b.focus());
+    });
+    const occurrences = new Map, cssVars = {
+        "--file-max-width": "list" === variant && "column" === direction ? "100%" : "attachments" === variant ? misc.setStyle(null != maxWidth ? maxWidth : "100%") : misc.setStyle(maxWidth),
+        "--file-min-width": "list" === variant && "column" === direction && null == minWidth ? "100%" : "attachments" === variant ? misc.setStyle(null != minWidth ? minWidth : 0) : misc.setStyle(minWidth),
+        "--file-gap": misc.setStyle(gap),
+        "--file-direction": direction,
+        "--file-wrap": "column" === direction ? "nowrap" : "wrap",
+        "--file-padding": misc.setStyle(null != padding ? padding : "calc(var(--spacing-xs) + var(--spacing-xxs))"),
+        "--file-icon-size": misc.setStyle(null != iconSize ? iconSize : 24),
+        "--file-bg-color": null != backgroundColor ? backgroundColor : "var(--core-surface-secondary)"
+    };
+    return jsxRuntime.jsx("div", Object.assign({}, attributes, {
+        ref: setRoot,
+        role: "list",
+        "aria-label": listName,
+        tabIndex: -1,
+        className: `${css.wrapper} ${null != className ? className : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        children: files.map((entry, index) => {
+            var _a, _b;
+            const item = "file" in entry ? entry : {
+                file: entry
+            }, key = Attachment.fileItemKey(entry), occurrence = null !== (_a = occurrences.get(key)) && void 0 !== _a ? _a : 0;
+            occurrences.set(key, occurrence + 1);
+            const remove = button => {
+                var _a, _b, _c;
+                if (button.ownerDocument.activeElement === button) {
+                    const buttons = Array.from(null !== (_b = null === (_a = root.current) || void 0 === _a ? void 0 : _a.querySelectorAll("button")) && void 0 !== _b ? _b : []), position = buttons.indexOf(button);
+                    focusAfterRemoval.current = {
+                        removed: button,
+                        next: null !== (_c = buttons[position + 1]) && void 0 !== _c ? _c : buttons[position - 1]
+                    };
+                }
+                null == onChange || onChange(files.filter((_, itemIndex) => itemIndex !== index));
+            }, rowKey = `${key}:${occurrence}`;
+            if ("attachments" === variant) {
+                const name = "string" == typeof item.file ? item.file : item.file.name;
+                return jsxRuntime.jsx("div", {
+                    role: "listitem",
+                    className: css.attachment,
+                    children: jsxRuntime.jsx(Attachment.Attachment, {
+                        content: item,
+                        size: attachmentSize,
+                        textSize: textSize,
+                        iconSize: iconSize,
+                        padding: padding,
+                        backgroundColor: backgroundColor,
+                        canRemove: canRemove && (!item.uploading || Boolean(null === (_b = item.error) || void 0 === _b ? void 0 : _b.trim())),
+                        removeLabel: `Remove file ${name}`,
+                        onRemove: event => remove(event.currentTarget),
+                        onToolTip: onToolTip,
+                        style: {
+                            maxWidth: "100%",
+                            minWidth: "var(--file-min-width)"
+                        }
+                    })
+                }, rowKey);
+            }
+            return jsxRuntime.jsx(FileRow, {
+                item: item,
+                canRemove: canRemove,
+                iconSize: null != iconSize ? iconSize : 24,
+                textSize: textSize,
+                onToolTip: onToolTip,
+                onRemove: remove
+            }, rowKey);
+        })
+    }));
+});
+
+FileListBase.displayName = "FileList";
+
+const FileList = React.memo(FileListBase);
+
+exports.FileList = FileList;