@apple-pie/slice 0.1.60 → 0.2.0

package/dist/esm/chunks/DropDown-CiB0Rp_P.mjs

@@ -0,0 +1,286 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useMemo, useId, useRef, useState, useEffect, useLayoutEffect } from "react";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { t as typeCss } from "./type.module--fVZ2ic7.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+var css = {
+    field: "DropDown-module_field__Me5dj",
+    message: "DropDown-module_message__msDvZ",
+    wrapper: "DropDown-module_wrapper__CyX0u",
+    face: "DropDown-module_face__6gyF3",
+    faceText: "DropDown-module_faceText__glhB3",
+    label: "DropDown-module_label__Mrwbp",
+    chevron: "DropDown-module_chevron__LkYsE",
+    select: "DropDown-module_select__mzNnv",
+    xs: "DropDown-module_xs__7L71q type-module_body-xs-regular__ZAFft",
+    s: "DropDown-module_s__vAxXD type-module_body-s-regular__vRHSP",
+    m: "DropDown-module_m__K6JPk type-module_body-m-regular__LuQBA",
+    l: "DropDown-module_l__Kib48 type-module_body-l-regular__lOYbg",
+    xl: "DropDown-module_xl__mwc0C type-module_body-xl-regular__pF2kC",
+    labelSlot: "DropDown-module_labelSlot__RRaeq",
+    separator: "DropDown-module_separator__2eu0p"
+};
+
+const emptyOptions = [], invalidChild = "DropDown children must be native <option> elements. Fragments and conditional options are allowed.";
+
+function optionText(children) {
+    let text = "";
+    return React.Children.forEach(children, child => {
+        if (null != child && "boolean" != typeof child) if ("string" != typeof child && "number" != typeof child && "bigint" != typeof child) {
+            if (!React.isValidElement(child) || child.type !== React.Fragment) throw new Error("DropDown option content must be plain text.");
+            text += optionText(child.props.children);
+        } else text += String(child);
+    }), text;
+}
+
+function collectOptions(children, elements) {
+    React.Children.forEach(children, child => {
+        if (null != child && "boolean" != typeof child && ("string" != typeof child || "" !== child.trim())) {
+            if (!React.isValidElement(child)) throw new Error(invalidChild);
+            if (child.type !== React.Fragment) {
+                if ("option" !== child.type) throw new Error(invalidChild);
+                elements.push(child);
+            } else collectOptions(child.props.children, elements);
+        }
+    });
+}
+
+function resolveOptions(items, children) {
+    if (void 0 !== items && null != children) throw new Error("DropDown accepts either options or <option> children, not both.");
+    if (null == children) return {
+        options: null != items ? items : emptyOptions,
+        elements: void 0
+    };
+    const elements = [];
+    collectOptions(children, elements);
+    return {
+        options: elements.map(element => {
+            var _a;
+            const props = element.props;
+            if (void 0 !== props.selected) throw new Error("Use DropDown value or defaultValue instead of selected on <option>.");
+            if (void 0 !== props.value && "string" != typeof props.value && "number" != typeof props.value) throw new Error("DropDown <option> values must be strings or numbers.");
+            const text = optionText(props.children).replace(/[\t\n\f\r ]+/g, " ").trim();
+            return {
+                value: void 0 === props.value ? text : String(props.value),
+                label: null !== (_a = props.label) && void 0 !== _a ? _a : text,
+                disabled: props.disabled
+            };
+        }),
+        elements: elements
+    };
+}
+
+const useClientLayoutEffect = "undefined" == typeof window ? useEffect : useLayoutEffect, withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key));
+
+function resolveValueKey(value, valueKey) {
+    if (valueKey && null !== value && "object" == typeof value) return value[valueKey];
+}
+
+function formValue(option, index, valueKey) {
+    if (void 0 !== option.formValue) return option.formValue;
+    const value = option.value;
+    if ("string" == typeof value || "number" == typeof value || "boolean" == typeof value || "bigint" == typeof value) return String(value);
+    const key = resolveValueKey(value, valueKey);
+    return String("string" == typeof key || "number" == typeof key || "boolean" == typeof key || "bigint" == typeof key ? key : index);
+}
+
+function optionLabel(option) {
+    return void 0 !== option.label ? option.label : "object" == typeof option.value ? "Select an option" : String(option.value);
+}
+
+function DropDownComponent(rawProps) {
+    var _a, _b, _c, _d;
+    const props = resolveColorProps(rawProps), {name: name, inputName: inputName, inputId: inputId, inputAttributes: inputAttributes = {}, label: label, variant: variant = "simple", behavior: behavior = "persistent", labelSize: labelSize = "m", stackedGap: stackedGap = 2, stackedLabelTextSize: stackedLabelTextSize = "body-xs-regular", labelBackgroundColor: labelBackgroundColor = "var(--core-surface-primary)", tip: tip, errorMessage: errorMessage, textColorError: textColorError = "var(--feedback-warning)", labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, value: value, defaultValue: defaultValue, valueKey: valueKey, options: optionItems, children: children, placeholder: placeholderProp, borderRadius: borderRadius = corners["corner-m"], backgroundColor: backgroundColor, iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-tertiary)", borderWidth: borderWidth = 1, borderColor: borderColor = "var(--core-outline-primary)", borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorError: borderColorError = "var(--feedback-warning)", borderColorDisabled: borderColorDisabled = "var(--core-outline-primary)", padding: padding, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: paddingTop, paddingBottom: paddingBottom, borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange, onChangeOption: onChangeOption, className: className, style: style} = props, spanAttributes = __rest(props, [ "name", "inputName", "inputId", "inputAttributes", "label", "variant", "behavior", "labelSize", "stackedGap", "stackedLabelTextSize", "labelBackgroundColor", "tip", "errorMessage", "textColorError", "labelColor", "textSize", "width", "height", "inline", "value", "defaultValue", "valueKey", "options", "children", "placeholder", "borderRadius", "backgroundColor", "iconColor", "textColor", "textColorDisabled", "textColorPlaceholder", "borderWidth", "borderColor", "borderColorFocused", "borderColorError", "borderColorDisabled", "padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onChangeOption", "className", "style" ]), {options: options, elements: optionElements} = useMemo(() => resolveOptions(optionItems, children), [ optionItems, children ]), placeholder = null != placeholderProp ? placeholderProp : "" === (null === (_a = options[0]) || void 0 === _a ? void 0 : _a.value), generatedId = useId(), id = inputId || generatedId, hasLabel = Boolean(null == label ? void 0 : label.trim()), ref = useRef(null), wrapperRef = useRef(null), faceRef = useRef(null), reduced = usePrefersReducedMotion(), message = null === (_b = error ? errorMessage : tip) || void 0 === _b ? void 0 : _b.trim(), messageId = `${id}-message`, initialValue = useRef(void 0 === defaultValue ? null === (_c = options[0]) || void 0 === _c ? void 0 : _c.value : defaultValue), [localSelection, setLocalSelection] = useState({
+        value: initialValue.current
+    }), localValue = localSelection.value, [isFocused, setIsFocused] = useState(!1), controlled = void 0 !== value, selectedValue = (() => {
+        var _a;
+        return controlled ? value : void 0 === localValue ? null === (_a = options[0]) || void 0 === _a ? void 0 : _a.value : localValue;
+    })(), index = null == selectedValue ? -1 : options.findIndex(option => function(left, right, valueKey) {
+        if (Object.is(left, right)) return !0;
+        const key = resolveValueKey(left, valueKey);
+        return void 0 !== key && Object.is(key, resolveValueKey(right, valueKey));
+    }(option.value, selectedValue, valueKey)), option = options[index], appearing = "stacked" === variant && "appear" === behavior && !reduced && hasLabel, collapsedLabel = appearing && (index < 0 || placeholder && ("" === selectedValue || 0 === index)), nativeValue = option ? formValue(option, index, valueKey) : "", latestNativeValue = useRef(nativeValue);
+    latestNativeValue.current = nativeValue, useEffect(() => {
+        !controlled && void 0 === localValue && options.length && setLocalSelection({
+            value: options[0].value
+        });
+    }, [ controlled, localValue, options ]), useEffect(() => {
+        const select = ref.current, form = null == select ? void 0 : select.form;
+        if (!select || !form) return;
+        let resetTimer;
+        const reset = event => {
+            clearTimeout(resetTimer), resetTimer = setTimeout(() => {
+                event.defaultPrevented || (controlled ? select.value = latestNativeValue.current : setLocalSelection({
+                    value: initialValue.current
+                }));
+            }, 0);
+        };
+        return form.addEventListener("reset", reset), () => {
+            clearTimeout(resetTimer), form.removeEventListener("reset", reset);
+        };
+    }, [ controlled, inputAttributes.form ]), useEffect(() => {
+        disabled && setIsFocused(!1);
+    }, [ disabled ]), useClientLayoutEffect(() => {
+        const wrapper = wrapperRef.current, face = faceRef.current;
+        if (!wrapper || !face) return;
+        const slot = face.querySelector("[data-label-slot]"), floatingLabel = null == slot ? void 0 : slot.querySelector("label"), measure = () => {
+            var _a, _b;
+            "outlined" === variant && floatingLabel && wrapper.style.setProperty("--dd-label-font-size", getComputedStyle(floatingLabel).fontSize), 
+            face.style.setProperty("--dd-column-top", `${face.offsetTop}px`);
+            const padding = getComputedStyle(wrapper), leftInset = Number.parseFloat(padding.paddingLeft) + Number.parseFloat(padding.borderLeftWidth), rightInset = Number.parseFloat(padding.paddingRight) + Number.parseFloat(padding.borderRightWidth);
+            if (null === (_a = wrapper.parentElement) || void 0 === _a || _a.style.setProperty("--dd-content-left", `${leftInset}px`), 
+            null === (_b = wrapper.parentElement) || void 0 === _b || _b.style.setProperty("--dd-content-right", `${rightInset}px`), 
+            "stacked" === variant && slot) {
+                const style = getComputedStyle(slot), space = (Number.parseFloat(style.height) || 0) + (Number.parseFloat(style.marginBottom) || 0);
+                wrapper.style.setProperty("--dd-label-space", `${space}px`);
+            }
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        return observer.observe(wrapper), observer.observe(face), slot && observer.observe(slot), 
+        () => observer.disconnect();
+    }, [ variant, label, labelSize, stackedLabelTextSize, stackedGap, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, width, height, iconSize, message, style ]);
+    const getBorder = () => "none" === borderStyle ? "none" : `${setStyle(borderWidth)} solid ${disabled ? borderColorDisabled : error ? borderColorError : isFocused ? borderColorFocused : borderColor}`, sidePadding = {};
+    null != paddingTop && (sidePadding.paddingTop = setStyle(paddingTop)), null != paddingRight && (sidePadding.paddingRight = setStyle(paddingRight)), 
+    null != paddingBottom && (sidePadding.paddingBottom = setStyle(paddingBottom)), 
+    null != paddingLeft && (sidePadding.paddingLeft = setStyle(paddingLeft));
+    const cssVars = {
+        "--dd-gap": setStyle(gap),
+        "--dd-height": setStyle(height),
+        "--dd-width": setStyle(width),
+        "--dd-margin": inline ? "0 var(--spacing-xs)" : "0",
+        "--dd-border-radius": "box" === borderStyle ? setStyle(borderRadius) : "0px",
+        "--dd-border": "box" === borderStyle ? getBorder() : "none",
+        "--dd-border-bottom": getBorder(),
+        "--dd-color": disabled ? textColorDisabled : placeholder && (collapsedLabel || index <= 0) ? textColorPlaceholder : textColor,
+        "--dd-bg-color": void 0 !== backgroundColor ? backgroundColor : "underline" === borderStyle ? "transparent" : "var(--core-surface-secondary)",
+        "--dd-padding": null != padding ? setStyle(padding) : "none" === borderStyle ? "0 0 var(--spacing-s) 0" : "outlined" === variant ? "calc(var(--spacing-s) + var(--dd-label-font-size, 0px) / 2) var(--spacing-m) var(--spacing-s)" : "var(--spacing-s) calc(var(--spacing-m) - var(--spacing-xs)) var(--spacing-s) var(--spacing-m)",
+        "--dd-icon-size": setStyle(iconSize),
+        "--dd-label-color": disabled ? textColorDisabled : labelColor,
+        "--dd-display": inline ? "inline-flex" : "flex",
+        "--dd-stacked-gap": setStyle(Number.isFinite(stackedGap) ? Math.max(0, stackedGap) : 2),
+        "--dd-label-background": labelBackgroundColor
+    };
+    return jsxs("span", {
+        className: css.field,
+        style: cssVars,
+        children: [ jsxs("span", Object.assign({}, withoutAria(spanAttributes), {
+            ref: wrapperRef,
+            "data-variant": variant,
+            "data-appear": appearing || void 0,
+            "data-collapsed-label": collapsedLabel || void 0,
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign(Object.assign({}, style), cssVars), sidePadding),
+            children: [ hasLabel && "simple" === variant && jsx("label", {
+                className: `${css.label} ${css[labelSize]}`,
+                htmlFor: id,
+                children: label
+            }), hasLabel && "simple" === variant && jsx("span", {
+                className: `${css.separator} ${css[labelSize]}`,
+                "aria-hidden": "true",
+                children: "|"
+            }), jsxs("span", {
+                ref: faceRef,
+                className: `${css.face} ${css[textSize]}`,
+                children: [ hasLabel && "simple" !== variant && jsx("span", {
+                    className: css.labelSlot,
+                    "data-label-slot": !0,
+                    children: jsx("label", {
+                        className: `${css.label} ${null !== (_d = typeCss[stackedLabelTextSize]) && void 0 !== _d ? _d : typeCss["body-xs-regular"]}`,
+                        htmlFor: id,
+                        children: label
+                    })
+                }), jsx("span", {
+                    className: css.faceText,
+                    "aria-hidden": "true",
+                    children: (collapsedLabel ? label : option ? optionLabel(option).replace(/^--\s*/, "") : placeholder ? "Select an option" : "") || " "
+                }) ]
+            }), jsx("span", {
+                className: css.chevron,
+                "aria-hidden": "true",
+                children: jsx(Icon, {
+                    name: "arrows.chevron-down",
+                    size: iconSize,
+                    strokeColor: disabled ? textColorDisabled : iconColor
+                })
+            }), jsxs("select", Object.assign({}, withoutAria(inputAttributes), {
+                className: `${css.select} ${css[textSize]}`,
+                value: nativeValue,
+                ref: ref,
+                id: id,
+                name: name,
+                disabled: disabled,
+                "aria-label": (null == inputName ? void 0 : inputName.trim()) ? inputName.trim() : hasLabel ? void 0 : (null == name ? void 0 : name.trim()) || "Select an option",
+                "aria-invalid": error || void 0,
+                "aria-describedby": message ? messageId : void 0,
+                onFocus: event => {
+                    var _a;
+                    setIsFocused(!0), null === (_a = inputAttributes.onFocus) || void 0 === _a || _a.call(inputAttributes, event);
+                },
+                onBlur: event => {
+                    var _a;
+                    setIsFocused(!1), null === (_a = inputAttributes.onBlur) || void 0 === _a || _a.call(inputAttributes, event);
+                },
+                onChange: event => {
+                    var _a;
+                    if (disabled) return;
+                    const selectedIndex = null === (_a = event.currentTarget.selectedOptions[0]) || void 0 === _a ? void 0 : _a.getAttribute("data-index");
+                    if (null == selectedIndex) return;
+                    const nextIndex = Number(selectedIndex), next = options[nextIndex];
+                    next && !next.disabled && nextIndex !== index && (controlled || setLocalSelection({
+                        value: next.value
+                    }), null == onChange || onChange(next.value, next, nextIndex), null == onChangeOption || onChangeOption(next));
+                },
+                children: [ index < 0 && jsx("option", {
+                    value: "",
+                    hidden: !0,
+                    disabled: !0
+                }), options.map((item, i) => {
+                    const element = null == optionElements ? void 0 : optionElements[i], key = formValue(item, i, valueKey), attributes = {
+                        value: formValue(item, i, valueKey),
+                        "data-index": i,
+                        disabled: item.disabled
+                    };
+                    return element ? React.cloneElement(element, Object.assign(Object.assign({}, attributes), {
+                        key: key
+                    })) : jsx("option", Object.assign({}, attributes, {
+                        children: optionLabel(item)
+                    }), key);
+                }) ]
+            })) ]
+        })), message && jsx("span", {
+            id: messageId,
+            className: `${css.message} ${typeCss["body-xs-regular"]}`,
+            style: {
+                color: error ? textColorError : "var(--core-text-tertiary)"
+            },
+            children: message
+        }) ]
+    });
+}
+
+DropDownComponent.displayName = "DropDown";
+
+const DropDown = React.memo(DropDownComponent);
+
+export { DropDown as D };

package/dist/esm/chunks/ErrorSummary-3XoZyvmX.mjs

@@ -0,0 +1,192 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, usePresence, useAnimationControls, motion } from "motion/react";
+
+import React, { useMemo, useEffect } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { a as addOpacity } from "./colors-DZ9xpMoE.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var 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] = usePresence(), reducedMotion = usePrefersReducedMotion(), controls = useAnimationControls(), variants = 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 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 ? jsx("div", {
+        className: css.clip,
+        children: children
+    }) : null : jsx(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(rawProps), {current: current} = useTheme(), reducedMotion = usePrefersReducedMotion(), warning = current.colors["feedback-warning"], {entries: entries, announcement: announcement = "polite", summaryName: summaryName = "Errors to review", textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor = 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 = __rest(props, [ "entries", "announcement", "summaryName", "textSize", "textColor", "backgroundColor", "borderColor", "borderWidth", "borderRadius", "padding", "gap", "transition", "motionValues", "className", "style", "tabIndex" ]), timing = useMemo(() => 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 jsxs("li", {
+            className: css.entry,
+            children: [ entry.fieldName ? 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
+            }) : jsx("strong", {
+                className: css.title,
+                children: entry.title
+            }), messages.length > 0 && jsx("ul", {
+                className: css.messages,
+                children: messages.map(message => jsx("li", {
+                    children: message
+                }, uniqueKey(message, messageCounts)))
+            }) ]
+        }, key);
+    }), cssVars = {
+        "--error-text-color": textColor,
+        "--error-bg-color": backgroundColor,
+        "--error-border-color": borderColor,
+        "--error-border-width": setStyle(borderWidth),
+        "--error-border-radius": setStyle(borderRadius),
+        "--error-padding": setStyle(padding),
+        "--error-gap": setStyle(gap)
+    };
+    return 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: jsx(AnimatePresence, {
+            children: hasEntries && jsx(AnimatedSummary, {
+                transition: timing,
+                motionValues: motionValues,
+                children: jsx("div", {
+                    className: `${css.panel} ${css[textSize]}`,
+                    children: jsx("ul", {
+                        className: css.entries,
+                        children: content
+                    })
+                })
+            }, "summary")
+        })
+    }));
+});
+
+ErrorSummaryComponent.displayName = "ErrorSummary";
+
+const ErrorSummary = React.memo(ErrorSummaryComponent);
+
+export { ErrorSummary as E };

package/dist/esm/chunks/{FileIcon-DSPzFDJY.mjs → FileIcon-hKJZoGIx.mjs}

@@ -1,36 +1,24 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DiR-r3pp.mjs";
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
-import React, { useMemo, useCallback } from "react";
+import React, { useRef } from "react";
 
 import { useTheme } from "../hooks/useTheme.mjs";
 
-import "../theme/colors.mjs";
+import { a as classNames } from "./misc-DI5GSqkt.mjs";
 
-import "../theme/type.mjs";
+import { r as resolveFileIconType } from "./files-6nwSZlJK.mjs";
 
-import { a as accessibleKeyDown } from "./misc-CagHFpjD.mjs";
+var FileIconTypes, css_icon = "FileIcon-module_icon__eHSAn";
 
-import "./broadcastChannel-B2yT2lpA.mjs";
-
-import "./webRTCStore-BpDbSd4Q.mjs";
-
-import "./microphoneStore-lnK3t3JC.mjs";
-
-import "./volumeStore-CSItrUF2.mjs";
-
-import "../hooks/useWindow.mjs";
-
-var FileIconNames;
-
-!function(FileIconNames) {
-    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";
-}(FileIconNames || (FileIconNames = {}));
+!function(FileIconTypes) {
+    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";
+}(FileIconTypes || (FileIconTypes = {}));
 
 const iconColorSchemes = {
     blue: {
@@ -206,39 +194,71 @@ const iconColorSchemes = {
             fill: "#fff"
         }) ]
     })
-} ] ]), FileIcon = React.memo(props => {
-    const {isDark: isDark} = useTheme(), {name: name = "pdf", size: size = 24, pointer: pointer = !1, disabled: disabled = !1, onClick: onClick} = props, svgAttributes = __rest(props, [ "name", "size", "pointer", "disabled", "onClick" ]), {id: svgId, className: className, style: style} = svgAttributes, rest = __rest(svgAttributes, [ "id", "className", "style" ]), svgStyle = null != style ? style : {}, cursor = useMemo(() => disabled ? "default" : pointer ? "pointer" : "inherit", [ disabled, pointer ]), iconStyle = useMemo(() => ({
-        cursor: cursor,
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        WebkitTapHighlightColor: "transparent",
-        outline: "none",
-        border: 0
-    }), [ cursor ]), handleClick = 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 ? 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} = 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 = __rest(props, [ "type", "filename", "size", "pointer", "disabled", "label", "decorative", "onClick", "onKeyDown", "onKeyUp", "onBlur", "aria-label", "className", "style" ]), inferred = null != type ? type : resolveFileIconType(filename), category = STATIC_FILE_ICONS.has(inferred) ? inferred : "other", definition = STATIC_FILE_ICONS.get(category), interactive = Boolean(onClick), hidden = decorative && !interactive, spacePressed = 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 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 && accessibleKeyDown(e, () => handleClick(e));
+        className: 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: [ 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";
+FileIconBase.displayName = "FileIcon";
+
+const FileIcon = React.memo(FileIconBase);
 
-export { FileIcon as F, FileIconNames as a };
+export { FileIcon as F, FileIconTypes as a };