@apple-pie/slice 0.1.60 → 0.2.0

package/README.md

@@ -1,5 +1,7 @@
 # Slice (`@apple-pie/slice`)
 
+Repository guidance: [AGENTS.md](../../AGENTS.md).
+
 Slice is a TypeScript-first React UI kit with themed components, hooks, optional Zustand stores, worker-backed uploads, and Storybook documentation.
 
 The package is currently in beta. Until `1.0.0`, breaking API changes may still happen.
@@ -119,7 +121,7 @@ npm run lint
 Contributor setup and workflow:
 
 - [CONTRIBUTING.md](./CONTRIBUTING.md)
-- [contributor-docs/build-architecture.md](./contributor-docs/build-architecture.md)
+- [docs/build-architecture.md](./docs/build-architecture.md)
 
 ## License
 
@@ -129,3 +131,17 @@ Contributor setup and workflow:
 
 - Documentation and demos: https://slice-uikit.com
 - Source and issues: https://github.com/uris/slice
+
+## Scrollbar styling
+
+After importing `@apple-pie/slice/styles.css`, apply `slice-scrollbars` to a scrollable element:
+
+```tsx
+<div className="slice-scrollbars" style={{ overflowY: 'auto', maxHeight: 320 }}>
+    {children}
+</div>
+```
+
+This uses the same scrollbar styles as Slice components. Override `--scrollbar-size`,
+`--scrollbar-bg`, `--scrollbar-thumb`, and `--scrollbar-thumb-hover` on the element to
+customize its appearance. The class styles scrollbars; it does not enable scrolling.

package/dist/cjs/chunks/ActionButton-DhHiZwXV.js

@@ -0,0 +1,200 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), mini = require("motion/mini"), 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"), 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"), Badge = require("./Badge-DtVP2qH0.js"), Dot = require("./Dot-0Dv8WX0n.js"), Icon = require("./Icon-COY7IZkK.js"), sharedTypes = require("./sharedTypes-BDMIewR9.js"), css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_background = "IconButton-module_background__BAuJE", css_content = "IconButton-module_content__nlYrR", css_icon = "IconButton-module_icon__2DDWy", css_indicators = "IconButton-module_indicators__7TT69", css_count = "IconButton-module_count__6r373", css_slot = "IconButton-module_slot__ZG-D0", css_frame = "IconButton-module_frame__Bip5r";
+
+const sizes = sharedTypes.buttonStyleDefaults.sizes;
+
+/** Keep the native button mounted when a live motion preference changes. */ function AnimatedSurface({target: target, transition: transition, reduceMotion: reduceMotion, className: className, children: children}) {
+    const controls = react.useAnimationControls(), mounted = React.useRef(!1);
+    return React.useEffect(() => {
+        controls.stop();
+        const {transition: _variantTiming, transitionEnd: transitionEnd} = target, values = tslib_es6.__rest(target, [ "transition", "transitionEnd" ]);
+        if (reduceMotion || !mounted.current) {
+            const settled = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, values), transitionEnd)).map(([key, value]) => [ key, Array.isArray(value) ? [ ...value ].reverse().find(item => null !== item) : value ]));
+            controls.set(settled);
+        } else controls.start(Object.assign(Object.assign({}, values), {
+            transitionEnd: transitionEnd,
+            transition: transition
+        }));
+        return mounted.current = !0, () => controls.stop();
+    }, [ controls, target, transition, reduceMotion ]), jsxRuntime.jsx(react.motion.span, {
+        "aria-hidden": "true",
+        className: className,
+        initial: !1,
+        animate: controls,
+        children: children
+    });
+}
+
+/** Let the browser blend translucent CSS colors, including live theme color-mix() values. */ function AnimatedBackground({color: color, transition: transition, reduceMotion: reduceMotion}) {
+    const ref = React.useRef(null), mounted = React.useRef(!1);
+    return React.useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+        const _a = react.getValueTransition(transition, "backgroundColor"), {type: type} = _a, timing = tslib_es6.__rest(_a, [ "type" ]);
+        if (!mounted.current || reduceMotion || !1 === type || "function" != typeof element.animate) return element.style.backgroundColor = color, 
+        void (mounted.current = !0);
+        const generator = "spring" === type ? react.spring : "inertia" === type || "decay" === type ? react.inertia : "function" == typeof type ? type : void 0, animation = mini.animate(element, {
+            backgroundColor: color
+        }, (() => {
+            if (!generator || generator.applyToOptions) return Object.assign(Object.assign({}, timing), {
+                type: generator
+            });
+            const generated = react.createGeneratorEasing(Object.assign(Object.assign({}, timing), {
+                duration: void 0 === timing.duration ? void 0 : 1e3 * timing.duration
+            }), 100, generator);
+            return Object.assign(Object.assign({}, timing), {
+                ease: generated.ease,
+                duration: generated.duration
+            });
+        })());
+        return () => animation.stop();
+    }, [ color, transition, reduceMotion ]), jsxRuntime.jsx("span", {
+        ref: ref,
+        "aria-hidden": "true",
+        className: css_background
+    });
+}
+
+const ActionButton = React.memo(function(rawProps) {
+    const props = resolveColorProps.resolveColorProps(rawProps), {actionName: actionName = "Action", labelContent: labelContent, contentClassName: contentClassName, iconSelected: iconSelected, iconFrame: iconFrame = !1, deselect: deselect = !0, textColor: textColor = "var(--core-text-primary)", textColorHover: textColorHover = "var(--core-text-primary)", textColorSelected: textColorSelected = "var(--core-text-primary)", buttonSize: buttonSize = "m", iconSize: iconSize = 20, iconStrokeWidth: iconStrokeWidth, icon: icon = "basic.more-horiz", iconFill: iconFill = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", iconColorSelected: iconColorSelected = "var(--core-text-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorSelected: backgroundColorSelected = "var(--core-outline-primary)", borderWidth: borderWidth = 0, borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = "50%", disabled: disabled = !1, hover: hover = !0, toggle: toggle = !1, selected: selected, defaultSelected: defaultSelected = !1, toggleIcon: toggleIcon = !1, showDot: showDot = !1, count: count = 0, tooltip: tooltip, motionValues: motionValues, transition: transition, onChange: onChange, onToolTip: onToolTip, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, className: className, style: style, type: type = "button"} = props, buttonAttributes = tslib_es6.__rest(props, [ "actionName", "labelContent", "contentClassName", "iconSelected", "iconFrame", "deselect", "textColor", "textColorHover", "textColorSelected", "buttonSize", "iconSize", "iconStrokeWidth", "icon", "iconFill", "iconColor", "iconColorHover", "iconColorSelected", "backgroundColor", "backgroundColorHover", "backgroundColorSelected", "borderWidth", "borderColor", "borderRadius", "disabled", "hover", "toggle", "selected", "defaultSelected", "toggleIcon", "showDot", "count", "tooltip", "motionValues", "transition", "onChange", "onToolTip", "onClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "className", "style", "type" ]), [internalSelected, setInternalSelected] = React.useState(defaultSelected), [hovered, setHovered] = React.useState(!1), on = toggle && (null != selected ? selected : internalSelected), ref = React.useRef(null), focused = React.useRef(!1), pointerOver = React.useRef(!1), tipOpen = React.useRef(!1), tipCallback = React.useRef(onToolTip), hasTipCallback = Boolean(onToolTip), reduceMotion = usePrefersReducedMotion.usePrefersReducedMotion(), {current: theme} = hooks_useTheme.useTheme(), themeMotion = theme.motion, motionTransition = React.useMemo(() => getWaterTransition.getWaterTransition(themeMotion, transition), [ themeMotion, transition ]), activeHover = hover && hovered && !disabled, size = "auto" === buttonSize ? 0 : "number" == typeof buttonSize ? Number.isFinite(buttonSize) && buttonSize > 0 ? buttonSize : sizes.m : null !== (_a = sizes[buttonSize]) && void 0 !== _a ? _a : sizes.m;
+    var _a;
+    const resolvedIconSize = Number.isFinite(iconSize) && iconSize >= 0 ? iconSize : 20, radius = "number" == typeof borderRadius ? `${Number.isFinite(borderRadius) ? Math.max(0, borderRadius) : 0}px` : borderRadius, color = on ? iconColorSelected : activeHover ? iconColorHover : iconColor, background = on ? backgroundColorSelected : activeHover ? backgroundColorHover : backgroundColor, iconTarget = React.useMemo(() => {
+        const variant = null == motionValues ? void 0 : motionValues[on ? "selected" : "unselected"], resolved = "function" == typeof variant ? variant(on, {}, {}) : variant;
+        return Object.assign(Object.assign({
+            rotate: 0,
+            scale: 1,
+            opacity: 1
+        }, "object" == typeof resolved ? resolved : {}), {
+            color: null != color ? color : "var(--core-text-primary)"
+        });
+    }, [ motionValues, on, color ]), contentColor = on ? textColorSelected : activeHover ? textColorHover : textColor, textTarget = React.useMemo(() => ({
+        color: contentColor
+    }), [ contentColor ]), cssVars = {
+        "--ib-button-size": `${size}px`,
+        "--ib-icon-size": `${resolvedIconSize}px`,
+        "--ib-border-radius": radius,
+        "--ib-border-width": `${Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 0}px`,
+        "--ib-border-color": borderColor
+    }, clearTip = () => {
+        var _a;
+        tipOpen.current && (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null)), 
+        tipOpen.current = !1;
+    }, showTip = event => {
+        !disabled && tooltip && onToolTip && (tipOpen.current = !0, tipCallback.current = onToolTip, 
+        onToolTip({
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            ref: ref,
+            event: event
+        }));
+    };
+    return React.useEffect(() => {
+        var _a;
+        return tooltip && hasTipCallback || !tipOpen.current || (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null), 
+        tipOpen.current = !1), disabled && (setHovered(!1), pointerOver.current = !1, focused.current = !1), 
+        () => {
+            var _a;
+            tipOpen.current && (null === (_a = tipCallback.current) || void 0 === _a || _a.call(tipCallback, null)), 
+            tipOpen.current = !1;
+        };
+    }, [ disabled, tooltip, hasTipCallback ]), jsxRuntime.jsxs("button", Object.assign({}, buttonAttributes, {
+        ref: ref,
+        type: type,
+        disabled: disabled,
+        className: `${css_button}${className ? ` ${className}` : ""}`,
+        style: Object.assign(Object.assign(Object.assign({}, style), cssVars), iconFrame ? {
+            borderWidth: 0
+        } : {}),
+        "aria-label": "string" == typeof actionName && actionName.trim() ? actionName.trim() : "Action",
+        "aria-labelledby": void 0,
+        "aria-disabled": disabled,
+        "aria-pressed": toggle ? on : void 0,
+        onClick: event => {
+            if (!disabled && (null == onClick || onClick(event), !event.defaultPrevented && (clearTip(), 
+            toggle && (!on || deselect)))) {
+                const next = !on;
+                void 0 === selected && setInternalSelected(next), null == onChange || onChange(next);
+            }
+        },
+        onMouseEnter: event => {
+            null == onMouseEnter || onMouseEnter(event), disabled || event.defaultPrevented || (pointerOver.current = !0, 
+            setHovered(!0), showTip(event));
+        },
+        onMouseLeave: event => {
+            null == onMouseLeave || onMouseLeave(event), pointerOver.current = !1, setHovered(!1), 
+            focused.current || clearTip();
+        },
+        onFocus: event => {
+            null == onFocus || onFocus(event), disabled || event.defaultPrevented || (focused.current = !0, 
+            showTip());
+        },
+        onBlur: event => {
+            null == onBlur || onBlur(event), focused.current = !1, pointerOver.current || clearTip();
+        },
+        children: [ !iconFrame && jsxRuntime.jsx(AnimatedBackground, {
+            color: background,
+            transition: motionTransition,
+            reduceMotion: reduceMotion
+        }), icon && jsxRuntime.jsxs("span", {
+            className: `${css_slot}${iconFrame ? ` ${css_frame}` : ""}`,
+            "aria-hidden": "true",
+            children: [ iconFrame && jsxRuntime.jsx(AnimatedBackground, {
+                color: background,
+                transition: motionTransition,
+                reduceMotion: reduceMotion
+            }), jsxRuntime.jsx("span", {
+                className: css_content,
+                children: jsxRuntime.jsx(AnimatedSurface, {
+                    className: css_icon,
+                    target: iconTarget,
+                    transition: motionTransition,
+                    reduceMotion: reduceMotion,
+                    children: jsxRuntime.jsx(Icon.Icon, {
+                        name: on && iconSelected ? iconSelected : icon,
+                        size: resolvedIconSize,
+                        strokeColor: "currentColor",
+                        stroke: iconStrokeWidth,
+                        fill: iconFill,
+                        toggle: toggleIcon && on,
+                        pointer: !1,
+                        tabIndex: -1
+                    })
+                })
+            }) ]
+        }), null != labelContent && jsxRuntime.jsx(AnimatedSurface, {
+            className: null != contentClassName ? contentClassName : css_content,
+            target: textTarget,
+            transition: motionTransition,
+            reduceMotion: reduceMotion,
+            children: labelContent
+        }), (showDot || 0 !== count) && jsxRuntime.jsxs("span", {
+            className: css_indicators,
+            "aria-hidden": "true",
+            children: [ jsxRuntime.jsx(Dot.Dot, {
+                show: showDot,
+                "aria-hidden": "true",
+                role: "presentation"
+            }), 0 !== count && jsxRuntime.jsx("span", {
+                className: css_count,
+                children: jsxRuntime.jsx(Badge.Badge, {
+                    variant: "light",
+                    count: count,
+                    hideZero: !0
+                })
+            }) ]
+        }) ]
+    }));
+});
+
+exports.ActionButton = ActionButton;

package/dist/cjs/chunks/Attachment-DhyXAQUf.js

@@ -0,0 +1,351 @@
+'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"), FileIcon = require("./FileIcon-BM8n3o-c.js"), IconButton = require("./IconButton-KJr15EW6.js"), ProgressIndicator = require("./ProgressIndicator-Ddj5dfEA.js");
+
+require("./resolveColor-DkYThq2J.js"), require("./broadcastChannel-DdPZ3LUB.js");
+
+var files = require("./files-RYD9L_pI.js");
+
+const identities = new WeakMap;
+
+let nextIdentity = 0;
+
+/** IDs survive immutable updates; object identity supports existing controlled arrays. */
+/** Progress uses percentages only. Invalid or missing values are indeterminate while uploading. */
+function fileProgress(item) {
+    return "number" == typeof item.progress && Number.isFinite(item.progress) ? Math.round(Math.max(0, Math.min(100, item.progress))) : item.uploading ? void 0 : 100;
+}
+
+var ContentType, styles = {
+    wrapper: "Attachment-module_wrapper__FMeV9",
+    canvas: "Attachment-module_canvas__vaAa8",
+    imageThumbnail: "Attachment-module_imageThumbnail__cNu8L",
+    textThumbnail: "Attachment-module_textThumbnail__0-2-x",
+    fileThumbnail: "Attachment-module_fileThumbnail__BfdCU",
+    info: "Attachment-module_info__oa-4l",
+    textRow: "Attachment-module_textRow__6QWcU",
+    filename: "Attachment-module_filename__pguOA",
+    filetype: "Attachment-module_filetype__TuJKA",
+    filesize: "Attachment-module_filesize__SuoeI",
+    button: "Attachment-module_button__Eysgq",
+    xs: "Attachment-module_xs__um8pJ type-module_body-xs-regular__ZAFft",
+    s: "Attachment-module_s__CBKXB type-module_body-s-regular__vRHSP",
+    m: "Attachment-module_m__vvmop type-module_body-m-regular__LuQBA",
+    l: "Attachment-module_l__8nONE type-module_body-l-regular__lOYbg",
+    xl: "Attachment-module_xl__YnqRE type-module_body-xl-regular__pF2kC",
+    preview: "Attachment-module_preview__XGomT",
+    metadata: "Attachment-module_metadata__y1rCH",
+    openButton: "Attachment-module_openButton__KvbVp",
+    srOnly: "Attachment-module_srOnly__4ftCZ",
+    upload: "Attachment-module_upload__A9zTv",
+    uploadSpinner: "Attachment-module_uploadSpinner__n6MnK",
+    uploadPercent: "Attachment-module_uploadPercent__75TxQ",
+    uploadLabel: "Attachment-module_uploadLabel__rUcQt",
+    previewLoader: "Attachment-module_previewLoader__8sPc5",
+    errorPreview: "Attachment-module_errorPreview__D6TJJ",
+    errorMessage: "Attachment-module_errorMessage__A9UIM"
+};
+
+/** Mount with the source as its key so loading/error state belongs to one URL. */ function AttachmentImagePreview({src: src, iconSize: iconSize, color: color}) {
+    const [status, setStatus] = React.useState("loading"), mounted = React.useRef(!0);
+    React.useEffect(() => (mounted.current = !0, () => {
+        mounted.current = !1;
+    }), []);
+    const load = image => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+        try {
+            yield image.decode(), mounted.current && setStatus("ready");
+        } catch (_a) {
+            mounted.current && setStatus("error");
+        }
+    });
+    return "error" === status ? jsxRuntime.jsx("div", {
+        className: styles.fileThumbnail,
+        children: jsxRuntime.jsx(FileIcon.FileIcon, {
+            type: "image",
+            size: iconSize,
+            decorative: !0
+        })
+    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx("img", {
+            className: styles.imageThumbnail,
+            style: {
+                opacity: "ready" === status ? 1 : 0
+            },
+            src: src,
+            alt: "",
+            loading: "lazy",
+            decoding: "async",
+            onLoad: event => {
+                load(event.currentTarget);
+            },
+            onError: () => setStatus("error")
+        }), "loading" === status && jsxRuntime.jsx("div", {
+            className: styles.previewLoader,
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                decorative: !0,
+                inline: !0,
+                show: !0,
+                size: 20,
+                color: color
+            })
+        }) ]
+    });
+}
+
+/** Image URLs belong to this hook and are revoked on replacement or unmount. */
+function useContentThumbnail(content) {
+    const file = getFile(content), [preview, setPreview] = React.useState(), contentType = function(content) {
+        return void 0 === content ? void 0 : "string" == typeof content ? exports.ContentType.Text : exports.ContentType.File;
+    }(content), contentFormat = function(content) {
+        if (void 0 === content) return;
+        if ("string" == typeof content) return FileIcon.FileIconTypes.text;
+        const file = getFile(content);
+        return void 0 === file ? void 0 : "string" == typeof file ? files.resolveFileIconType(file) : file.type.startsWith("image/") ? FileIcon.FileIconTypes.image : files.resolveFileIconType(file.name);
+    }(content), previewable = file instanceof File && (contentFormat === FileIcon.FileIconTypes.image || function(file, format) {
+        return format !== FileIcon.FileIconTypes.image && (!!file.type.startsWith("text/") || (format === FileIcon.FileIconTypes.code || format === FileIcon.FileIconTypes.md || /\.(txt|text|log|clipboard)$/i.test(file.name)));
+    }(file, contentFormat));
+    React.useEffect(() => {
+        if (!(file instanceof File && previewable)) return void setPreview(void 0);
+        if (contentFormat === FileIcon.FileIconTypes.image) {
+            let src;
+            try {
+                src = URL.createObjectURL(file);
+            } catch (_a) {
+                return void setPreview({
+                    file: file,
+                    status: "error"
+                });
+            }
+            return setPreview({
+                file: file,
+                thumbnail: {
+                    type: "image",
+                    src: src
+                },
+                status: "ready"
+            }), () => URL.revokeObjectURL(src);
+        }
+        const reader = new FileReader;
+        return setPreview({
+            file: file,
+            status: "loading"
+        }), reader.onload = () => {
+            "string" == typeof reader.result ? setPreview({
+                file: file,
+                thumbnail: {
+                    type: "text",
+                    text: reader.result.slice(0, 250)
+                },
+                status: "ready"
+            }) : setPreview({
+                file: file,
+                status: "error"
+            });
+        }, reader.onerror = () => setPreview({
+            file: file,
+            status: "error"
+        }), reader.readAsText(file.slice(0, 4096)), () => {
+            reader.onload = null, reader.onerror = null, reader.readyState === FileReader.LOADING && reader.abort();
+        };
+    }, [ file, contentFormat, previewable ]);
+    const current = (null == preview ? void 0 : preview.file) === file ? preview : void 0;
+    return {
+        contentType: contentType,
+        contentFormat: contentFormat,
+        thumbnail: "string" == typeof content ? {
+            type: "text",
+            text: content.slice(0, 250)
+        } : null == current ? void 0 : current.thumbnail,
+        isLoading: previewable && (!current || "loading" === current.status),
+        fileName: "string" == typeof content ? "clipboard" : getFileName(file),
+        fileExtension: getFileExtension(file),
+        fileSize: file instanceof File ? formatFileSize(file.size) : void 0
+    };
+}
+
+function getFile(content) {
+    if ("object" == typeof content) return "file" in content ? content.file : content;
+}
+
+function getBasename(file) {
+    var _a;
+    if (void 0 === file) return;
+    let name = "string" == typeof file ? file : file.name;
+    return "string" == typeof file && name.includes("/") && (name = name.split(/[?#]/)[0]), 
+    null !== (_a = name.split(/[\\/]/).pop()) && void 0 !== _a ? _a : "";
+}
+
+function getFileName(file) {
+    const basename = getBasename(file);
+    if (void 0 === basename) return;
+    const dot = basename.lastIndexOf(".");
+    return dot <= 0 || dot === basename.length - 1 ? basename : basename.slice(0, dot);
+}
+
+/** Lowercase extension without a dot; filenames and URL paths are supported. */ function getFileExtension(file) {
+    const basename = getBasename(file);
+    if (void 0 === basename) return;
+    const dot = basename.lastIndexOf(".");
+    return dot <= 0 || dot === basename.length - 1 ? void 0 : basename.slice(dot + 1).toLowerCase();
+}
+
+/** Use 1024 bytes per k, with at most one decimal place. */ function formatFileSize(bytes) {
+    return bytes < 1048576 ? Math.round(bytes / 1024 * 10) / 10 + " k" : Math.round(bytes / 1048576 * 10) / 10 + " mb";
+}
+
+exports.ContentType = void 0, (ContentType = exports.ContentType || (exports.ContentType = {})).Text = "text", 
+ContentType.File = "file", exports.Attachment = function(props) {
+    var _a;
+    const _b = resolveColorProps.resolveColorProps(props), {content: content, textColor: textColor = "var(--core-text-primary)", textColorLight: textColorLight = "var(--core-text-secondary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", thumbColor: thumbColor = "var(--core-text-primary)", textSize: textSize = "s", size: size = "m", width: width, height: height, borderColor: borderColor = "var(--core-outline-primary)", borderWidth: borderWidth = 1, borderStyle: borderStyle = "solid", borderRadius: borderRadius = 16, iconSize: iconSize = 48, iconGap: iconGap = 4, padding: padding = "0 var(--spacing-xs)", thumbTextSize: thumbTextSize = 10, thumbPadding: thumbPadding = "var(--spacing-m)", canRemove: canRemove, removeLabel: removeLabel, attachmentName: attachmentName, openLabel: openLabel, onOpen: onOpen, disabled: disabled = !1, onRemove: onRemove, onToolTip: onToolTip, className: className, style: style} = _b, nativeAttributes = tslib_es6.__rest(_b, [ "content", "textColor", "textColorLight", "backgroundColor", "thumbColor", "textSize", "size", "width", "height", "borderColor", "borderWidth", "borderStyle", "borderRadius", "iconSize", "iconGap", "padding", "thumbTextSize", "thumbPadding", "canRemove", "removeLabel", "attachmentName", "openLabel", "onOpen", "disabled", "onRemove", "onToolTip", "className", "style" ]), descriptionId = React.useId(), errorId = React.useId(), fileItem = "object" == typeof content && "file" in content ? content : void 0, error = (null === (_a = null == fileItem ? void 0 : fileItem.error) || void 0 === _a ? void 0 : _a.trim()) || void 0, uploading = Boolean(null == fileItem ? void 0 : fileItem.uploading) && !error, progress = fileItem ? fileProgress(fileItem) : void 0, showFileSize = "xs" !== size && "s" !== size, showUploadPercent = "xs" !== size && "s" !== size, {thumbnail: thumbnail, isLoading: isLoading, contentFormat: contentFormat, fileSize: fileSize, fileExtension: fileExtension, fileName: fileName} = useContentThumbnail(content), label = void 0 === content ? "" : "string" == typeof content ? "Clipboard content" : "file" in content ? "string" == typeof content.file ? null != fileName ? fileName : content.file : null != fileName ? fileName : content.file.name : null != fileName ? fileName : content.name, accessibleName = (null == attachmentName ? void 0 : attachmentName.trim()) || label || "Attachment", actionName = (null == attachmentName ? void 0 : attachmentName.trim()) ? attachmentName.trim() : "object" != typeof content || "file" in content ? fileItem ? "string" == typeof fileItem.file ? fileItem.file || accessibleName : fileItem.file.name || accessibleName : accessibleName : content.name || accessibleName, removeName = (null == removeLabel ? void 0 : removeLabel.trim()) || `Remove ${actionName}`, openName = (null == openLabel ? void 0 : openLabel.trim()) || `Open ${actionName}`, removable = (null == canRemove || canRemove) && Boolean(onRemove), uploadLabel = void 0 === progress ? "Uploading" : `Uploading ${progress}%`, description = [ uploading ? uploadLabel : void 0, null != contentFormat ? contentFormat : fileExtension, null == fileSize ? void 0 : fileSize.replace(/ k$/, " kilobytes").replace(/ mb$/, " megabytes"), error || "text" !== (null == thumbnail ? void 0 : thumbnail.type) ? void 0 : thumbnail.text ].filter(Boolean).join(". "), sizes = {
+        xs: 100,
+        s: 125,
+        m: 140,
+        l: 160,
+        xl: 180
+    }, cssVars = Object.assign({
+        "--text-color": textColor,
+        "--text-color-light": textColorLight,
+        "--background-color": backgroundColor,
+        "--thumb-color": thumbColor,
+        "--attachment-width": misc.setStyle(null != width ? width : sizes[size]),
+        "--attachment-height": misc.setStyle(null != height ? height : sizes[size]),
+        "--border-color": borderColor,
+        "--border-width": misc.setStyle(borderWidth),
+        "--border-style": borderStyle,
+        "--border-radius": misc.setStyle(borderRadius),
+        "--icon-gap": misc.setStyle(iconGap),
+        "--info-padding": misc.setStyle(padding),
+        "--thumb-text-size": misc.setStyle(thumbTextSize),
+        "--thumb-padding": misc.setStyle(thumbPadding)
+    }, style);
+    return jsxRuntime.jsxs("div", Object.assign({}, nativeAttributes, {
+        role: "group",
+        "aria-label": accessibleName,
+        "aria-describedby": [ description ? descriptionId : void 0, error ? errorId : void 0 ].filter(Boolean).join(" ") || void 0,
+        "aria-disabled": disabled || void 0,
+        className: [ styles.wrapper, className ].filter(Boolean).join(" "),
+        style: cssVars,
+        children: [ jsxRuntime.jsxs("div", {
+            className: styles.canvas,
+            children: [ error ? jsxRuntime.jsx("div", {
+                id: errorId,
+                className: `${styles.errorPreview} ${styles[textSize]}`,
+                role: "alert",
+                tabIndex: 0,
+                children: jsxRuntime.jsxs("span", {
+                    className: styles.errorMessage,
+                    children: [ jsxRuntime.jsxs("span", {
+                        className: styles.srOnly,
+                        children: [ actionName, ": " ]
+                    }), error ]
+                })
+            }) : jsxRuntime.jsxs("div", {
+                className: styles.preview,
+                "aria-hidden": "true",
+                children: [ "image" === (null == thumbnail ? void 0 : thumbnail.type) && jsxRuntime.jsx(AttachmentImagePreview, {
+                    src: thumbnail.src,
+                    iconSize: iconSize,
+                    color: textColorLight
+                }, thumbnail.src), isLoading && jsxRuntime.jsx("div", {
+                    className: styles.previewLoader,
+                    children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                        decorative: !0,
+                        inline: !0,
+                        show: !0,
+                        size: 20,
+                        color: textColorLight
+                    })
+                }), "text" === (null == thumbnail ? void 0 : thumbnail.type) && jsxRuntime.jsx("span", {
+                    className: styles.textThumbnail,
+                    children: thumbnail.text
+                }), !thumbnail && !isLoading && void 0 !== content && jsxRuntime.jsx("div", {
+                    className: styles.fileThumbnail,
+                    children: jsxRuntime.jsx(FileIcon.FileIcon, {
+                        type: contentFormat,
+                        size: iconSize,
+                        decorative: !0
+                    })
+                }) ]
+            }), onOpen && !error && jsxRuntime.jsx("button", {
+                type: "button",
+                className: styles.openButton,
+                "aria-label": openName,
+                disabled: disabled,
+                onClick: event => {
+                    event.stopPropagation(), onOpen(event);
+                }
+            }) ]
+        }), description && jsxRuntime.jsx("span", {
+            id: descriptionId,
+            className: styles.srOnly,
+            children: description
+        }), jsxRuntime.jsxs("div", {
+            className: styles.info,
+            children: [ jsxRuntime.jsx("div", {
+                className: styles.textRow,
+                children: jsxRuntime.jsx("span", {
+                    className: `${styles.filename} ${styles[textSize]}`,
+                    title: label,
+                    children: label
+                })
+            }), uploading ? jsxRuntime.jsxs("div", {
+                className: `${styles.textRow} ${styles.upload} ${styles[textSize]}`,
+                role: "progressbar",
+                tabIndex: -1,
+                "aria-label": `Uploading ${accessibleName}`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": progress,
+                "aria-valuetext": uploadLabel,
+                children: [ jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                    className: styles.uploadSpinner,
+                    decorative: !0,
+                    inline: !0,
+                    show: !0,
+                    size: 14,
+                    color: textColorLight
+                }), jsxRuntime.jsx("span", {
+                    className: styles.uploadLabel,
+                    children: "Uploading"
+                }), showUploadPercent && void 0 !== progress && jsxRuntime.jsxs("span", {
+                    className: styles.uploadPercent,
+                    children: [ progress, "%" ]
+                }) ]
+            }) : (contentFormat || fileExtension || showFileSize && fileSize) && jsxRuntime.jsxs("div", {
+                className: `${styles.textRow} ${styles.metadata}`,
+                "aria-hidden": "true",
+                children: [ (contentFormat || fileExtension) && jsxRuntime.jsx("span", {
+                    className: `${styles.filetype} ${styles[textSize]}`,
+                    title: label,
+                    children: null != contentFormat ? contentFormat : fileExtension
+                }), showFileSize && fileSize && jsxRuntime.jsx("span", {
+                    className: `${styles.filesize} ${styles[textSize]}`,
+                    title: label,
+                    children: fileSize
+                }) ]
+            }) ]
+        }), removable && jsxRuntime.jsx("div", {
+            className: styles.button,
+            children: jsxRuntime.jsx(IconButton.IconButton, {
+                icon: "basic.cross",
+                buttonSize: "s",
+                iconSize: 16,
+                actionName: removeName,
+                tooltip: removeName,
+                onToolTip: onToolTip,
+                disabled: disabled,
+                onClick: event => {
+                    event.stopPropagation(), null == onRemove || onRemove(event);
+                }
+            })
+        }) ]
+    }));
+}, exports.fileItemKey = function(item) {
+    const fileItem = "file" in item ? item : void 0;
+    if (void 0 !== (null == fileItem ? void 0 : fileItem.id)) return `id:${fileItem.id}`;
+    const identity = fileItem && "string" != typeof fileItem.file ? fileItem.file : item;
+    let key = identities.get(identity);
+    return void 0 === key && (key = nextIdentity++, identities.set(identity, key)), 
+    `object:${key}`;
+}, exports.fileProgress = fileProgress;

package/dist/cjs/chunks/AudioBubble-DS5Oea-b.js

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), 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 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 useAudioVisualizer = require("./useAudioVisualizer-D7bStvIe.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), css_wrapper = "AudioBubble-module_wrapper__f2yKg flexBox-module_row__z24tF", css_bubble = "AudioBubble-module_bubble__bpPT3 flexBox-module_row__z24tF";
+
+const AudioBubble = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {current: current} = hooks_useTheme.useTheme(), color = current.colors["core-text-primary"], {"aria-hidden": ariaHidden = !0, audioStream: audioStream, playing: playing = !1, size: size = 64, backgroundColor: backgroundColor = "var(--core-text-primary)", glow: glow = !0, glowColor: glowColor = colors.addOpacity(color, .1), glowSize: glowSize = 48, glowOffset: glowOffset = 18, minScale: minScale = 1, maxScale: maxScale = 3, intensity: intensity = 2.2, peakIntensity: peakIntensity = .5, risePerSeconds: risePerSeconds = 4, releasePerSeconds: releasePerSeconds = 1.5} = props, divAttributes = tslib_es6.__rest(props, [ "aria-hidden", "audioStream", "playing", "size", "backgroundColor", "glow", "glowColor", "glowSize", "glowOffset", "minScale", "maxScale", "intensity", "peakIntensity", "risePerSeconds", "releasePerSeconds" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", restingScale = Number.isFinite(minScale) && minScale > 0 ? minScale : 1, reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion(), [scale, setScale] = React.useState(restingScale), visualizerSettings = React.useMemo(() => ({
+        minScale: minScale,
+        maxScale: maxScale,
+        intensityMultiplier: intensity,
+        peakIntensity: peakIntensity,
+        risePerSecond: risePerSeconds,
+        releasePerSecond: releasePerSeconds
+    }), [ minScale, maxScale, intensity, peakIntensity, risePerSeconds, releasePerSeconds ]), setGlow = React.useMemo(() => glow ? `0 ${glowOffset}px ${glowSize}px ${glowColor}` : "unset", [ glow, glowColor, glowSize, glowOffset ]), cssVars = React.useMemo(() => ({
+        "--ab-size": `${size}px`,
+        "--ab-bg-color": backgroundColor,
+        "--ab-box-shadow": setGlow
+    }), [ size, backgroundColor, setGlow ]);
+    return useAudioVisualizer.useAudioVisualizer(audioStream, playing && !reducedMotion, visualizerSettings, ({scale: nextScale}) => setScale(nextScale), () => setScale(restingScale)), 
+    jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: divStyle
+    }, rest, {
+        "aria-hidden": ariaHidden,
+        children: jsxRuntime.jsx("div", {
+            className: css_bubble,
+            style: Object.assign(Object.assign({}, cssVars), {
+                transform: `scale(${scale})`,
+                transition: reducedMotion ? "none" : void 0
+            })
+        })
+    }));
+});
+
+exports.AudioBubble = AudioBubble;