@apple-pie/slice 0.1.52 → 0.1.53

package/dist/esm/chunks/{DivInput-SeyX77Nb.mjs → DivInput-faLHJ1b9.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -7,12 +7,14 @@ import { motion } from "motion/react";
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from "react";
 
-import { b as cleanString } from "./misc-GB29X0YR.mjs";
+import { corners } from "../theme/corners.mjs";
+
+import { b as cleanString } from "./misc-O5ZSVDP0.mjs";
 
 var css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
 
 const DivInput = React.memo(props => {
-    const {value: value = "", name: name = "Input Field", placeholder: placeholder = "Placeholder", isEditable: isEditable = !0, wrap: wrap = !1, focus: focus = !1, width: width = "auto", textAlign: textAlign = "left", clamp: clamp = 3, padding: padding = "0px", onChange: onChange = () => null, onSubmit: onSubmit = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onDblClick: onDblClick = () => null, onClick: onClick = () => null, borderRadius: borderRadius, radius: radius = 4, backgroundColor: backgroundColor, bgColor: bgColor = "var(--core-surface-secondary)"} = props, divAttributes = __rest(props, [ "value", "name", "placeholder", "isEditable", "wrap", "focus", "width", "textAlign", "clamp", "padding", "onChange", "onSubmit", "onFocus", "onBlur", "onDblClick", "onClick", "borderRadius", "radius", "backgroundColor", "bgColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), innerText = useRef(cleanString("" === value ? placeholder : value)), [isFocused, setIsFocused] = useState(focus), [text, setText] = useState(innerText.current), [isPlaceholder, setIsPlaceholder] = useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, setCursor = useCallback((to, length = 1) => {
+    const {value: valueProp = "", name: name = "Input Field", placeholder: placeholder = "Placeholder", isEditable: isEditable = !0, wrap: wrap = !1, focus: focus = !1, width: width = "auto", textAlign: textAlign = "left", clamp: clamp = 3, padding: padding = "0px", onChange: onChange = () => null, onSubmit: onSubmit = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onDblClick: onDblClick = () => null, onClick: onClick = () => null, borderRadius: borderRadius, radius: radius = corners["corner-xs"], backgroundColor: backgroundColor = "var(--core-surface-secondary)"} = props, divAttributes = __rest(props, [ "value", "name", "placeholder", "isEditable", "wrap", "focus", "width", "textAlign", "clamp", "padding", "onChange", "onSubmit", "onFocus", "onBlur", "onDblClick", "onClick", "borderRadius", "radius", "backgroundColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), value = null != valueProp ? valueProp : "", innerText = useRef(cleanString("" === value ? placeholder : value)), [isFocused, setIsFocused] = useState(focus), [text, setText] = useState(innerText.current), [isPlaceholder, setIsPlaceholder] = useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, setCursor = useCallback((to, length = 1) => {
         if (ref.current) {
             const range = document.createRange();
             range.setStart(ref.current, "start" === to ? 0 : length), range.setEnd(ref.current, "start" === to ? 0 : 1);
@@ -78,10 +80,10 @@ const DivInput = React.memo(props => {
         "--div-input-white-space": isEditable && wrap ? "wrap" : "no-wrap",
         "--div-input-line-clamp": isEditable && isFocused ? "none" : null != clamp ? clamp : "none",
         "--div-input-cursor": isEditable ? "text" : "default",
-        "--div-input-bg": isEditable ? null != bgColor ? bgColor : "var(--core-surface-secondary)" : "transparent",
+        "--div-input-bg": isEditable ? null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)" : "transparent",
         "--div-input-wrapper-bg": isEditable && isFocused ? null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)" : "transparent",
         "--div-input-border-radius": `${resolvedBorderRadius}px`
-    }), [ clamp, wrap, isEditable, width, textAlign, isFocused, padding, isPlaceholder, setWidth, resolvedBackgroundColor, resolvedBorderRadius, bgColor ]);
+    }), [ clamp, wrap, isEditable, width, textAlign, isFocused, padding, isPlaceholder, setWidth, resolvedBackgroundColor, resolvedBorderRadius ]);
     return jsx("div", Object.assign({
         id: divId,
         className: `${css_wrapper}${divClass}`,
@@ -101,7 +103,7 @@ const DivInput = React.memo(props => {
             onClick: handleClick,
             role: "textbox",
             "aria-label": name,
-            children: null != value ? value : placeholder
+            children: null != valueProp ? valueProp : placeholder
         })
     }));
 });

package/dist/esm/chunks/{Dot-Lyaimh03.mjs → Dot-CWVfujdC.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/chunks/{DrggablePanel--TPNDMpD.mjs → DrggablePanel-DCA9LeNq.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,13 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { p as pointerPosition } from "./misc-GB29X0YR.mjs";
+import { p as pointerPosition } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
+
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -49,10 +51,10 @@ const DraggablePanel = React.memo(props => {
         width: 10,
         color: "transparent",
         offsetX: !0
-    }, borderRight: borderRight = "1px solid var(--core-outline-secondary)", borderLeft: borderLeft = "1px solid var(--core-outline-secondary)", bgColor: bgColor = "transparent", drags: drags = "right", isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !1, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle = {
+    }, borderRight: borderRight = "1px solid var(--core-outline-secondary)", borderLeft: borderLeft = "1px solid var(--core-outline-secondary)", backgroundColor: backgroundColor = "transparent", drags: drags = "right", isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !1, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle = {
         height: 24,
         width: 9
-    }, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = __rest(props, [ "children", "sizeConstraints", "isClosed", "resizeHandle", "borderRight", "borderLeft", "bgColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "containerRef", "onResize", "onResizeStart", "onResizeEnd" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = useRef(null), div = useRef(null), [isDragging, setIsDragging] = useState(!1), isOver = useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = useObserveResize(containerRef), panelSize = useObserveResize(div), [handleHighlight, setHandleHighlight] = useState(!1), [lastWidth, setLastWidth] = useState(null), [panelClosed, setPanelClosed] = useState(isClosed), [constraints, setConstraints] = useState(() => resolveConstraints(sizeConstraints)), [contWidth, setContWidth] = useState((null == containerRef ? void 0 : containerRef.current) ? containerRef.current.offsetWidth : void 0 !== globalThis.window ? window.innerWidth : void 0), [mounted, setMounted] = useState(!1), timer = useRef(null), closed = panelSize.width <= 1, startX = useRef(0), startWidth = useRef(0), divWidth = useRef(0), divHeight = useRef(0), deltaWidth = useRef(0);
+    }, transitionDurationOnInit: transitionDurationOnInit, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = __rest(props, [ "children", "sizeConstraints", "isClosed", "resizeHandle", "borderRight", "borderLeft", "backgroundColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "transitionDurationOnInit", "containerRef", "onResize", "onResizeStart", "onResizeEnd" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = useRef(null), div = useRef(null), [isDragging, setIsDragging] = useState(!1), isOver = useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = useObserveResize(containerRef), panelSize = useObserveResize(div), [handleHighlight, setHandleHighlight] = useState(!1), [lastWidth, setLastWidth] = useState(null), [panelClosed, setPanelClosed] = useState(isClosed), [constraints, setConstraints] = useState(() => resolveConstraints(sizeConstraints)), [contWidth, setContWidth] = useState((null == containerRef ? void 0 : containerRef.current) ? containerRef.current.offsetWidth : void 0 !== globalThis.window ? window.innerWidth : void 0), [mounted, setMounted] = useState(!1), timer = useRef(null), closed = panelSize.width <= 1, startX = useRef(0), startWidth = useRef(0), divWidth = useRef(0), divHeight = useRef(0), deltaWidth = useRef(0);
     const handleWindowResize = useCallback(() => {
         (null == containerRef ? void 0 : containerRef.current) || setContWidth(window.innerWidth);
     }, [ containerRef ]), handleMouseOver = useCallback(() => {
@@ -88,13 +90,7 @@ const DraggablePanel = React.memo(props => {
         timer.current && clearTimeout(timer.current), state ? timer.current = setTimeout(() => {
             setHandleHighlight(state);
         }, isTouchDevice ? 0 : 350) : setHandleHighlight(!1);
-    }, [ isTouchDevice ]), getClientX = useCallback(e => pointerPosition(e), []), getNewWidth = useCallback(clientX => "right" === drags ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ drags ]), canDrag = useCallback((newWidth, clientX) => {
-        if (null == constraints ? void 0 : constraints.min) {
-            if (newWidth <= constraints.min) return !1;
-            if (newWidth < constraints.min) return !1;
-        }
-        return !((null == constraints ? void 0 : constraints.max) && newWidth >= constraints.max && clientX - startX.current > 0);
-    }, [ constraints ]), doDrag = useCallback(e => {
+    }, [ isTouchDevice ]), getClientX = useCallback(e => pointerPosition(e), []), getNewWidth = useCallback(clientX => "right" === drags ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ drags ]), canDrag = useCallback((newWidth, clientX) => !((null == constraints ? void 0 : constraints.min) && newWidth < constraints.min) && !((null == constraints ? void 0 : constraints.max) && newWidth > constraints.max && clientX - startX.current > 0), [ constraints ]), doDrag = useCallback(e => {
         if (null == div ? void 0 : div.current) {
             e.stopPropagation(), e.preventDefault();
             const el = div.current, clientX = getClientX(e), newWidth = getNewWidth(clientX);
@@ -124,7 +120,16 @@ const DraggablePanel = React.memo(props => {
             onResize(update), onResizeEnd(update);
         }
         setLastWidth(divWidth.current), isOver.current || setHighlight(!1);
-    }, [ doDrag, onResizeEnd, onResize, setHighlight ]), transition = useMemo(() => "width var(--motion-water-duration) var(--motion-water)", []), initDrag = useCallback(e => {
+    }, [ doDrag, onResizeEnd, onResize, setHighlight ]), [initialOpenSettled, setInitialOpenSettled] = useState(!1);
+    useEffect(() => {
+        mounted && setInitialOpenSettled(!0);
+    }, [ mounted ]);
+    const transition = useMemo(() => {
+        if (mounted && !initialOpenSettled && void 0 !== transitionDurationOnInit) {
+            return `width ${"number" == typeof transitionDurationOnInit ? `${transitionDurationOnInit}ms` : transitionDurationOnInit} var(--motion-water)`;
+        }
+        return "width var(--motion-water-duration) var(--motion-water)";
+    }, [ mounted, initialOpenSettled, transitionDurationOnInit ]), initDrag = useCallback(e => {
         if ((null == div ? void 0 : div.current) && document.defaultView) {
             setIsDragging(!0);
             const el = div.current;
@@ -155,8 +160,8 @@ const DraggablePanel = React.memo(props => {
     } : {
         left: isTouchDevice ? -22 : -(gripper.width || 10) / 2
     }, [ drags, isTouchDevice, gripper.width ]), normalizeWidth = useCallback(width => mounted ? "number" == typeof width ? width <= 1 && width >= 0 ? contWidth ? contWidth * width + "px" : 0 : `${width}px` : width : "0px", [ contWidth, mounted ]), width = useMemo(() => drags ? panelClosed ? 0 : lastWidth || normalizeWidth(constraints.initial) : "100%", [ drags, panelClosed, lastWidth, constraints.initial, normalizeWidth ]), cssVars = useMemo(() => ({
-        "--panel-bg": null != bgColor ? bgColor : "transparent"
-    }), [ bgColor ]);
+        "--panel-bg": null != backgroundColor ? backgroundColor : "transparent"
+    }), [ backgroundColor ]);
     return jsxs("div", Object.assign({
         id: divId,
         className: `${css_panel}${divClass}`,
@@ -164,6 +169,7 @@ const DraggablePanel = React.memo(props => {
         onContextMenu: e => (disableOnContext && e.preventDefault(), !0),
         style: Object.assign(Object.assign(Object.assign({}, divStyle), cssVars), {
             overflow: "visible",
+            flexShrink: 0,
             width: width,
             height: "100%",
             maxWidth: drags ? constraints.max : "unset",

package/dist/esm/chunks/{DropDown-BmumgcHV.mjs → DropDown-C9fS9E6c.mjs}

@@ -1,13 +1,15 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-DGQB6Mfm.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
+
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
 var css = {
     wrapper: "DropDown-module_wrapper__CyX0u flexBox-module_rowStart__4tcxS",
@@ -28,7 +30,7 @@ function resolveValueKey(value, valueKey) {
 }
 
 function DropDownComponent(props) {
-    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, selectedIndex: selectedIndex, selectedValue: selectedValue, valueKey: valueKey, options: options = [], placeholder: placeholder = !0, borderRadius: borderRadius = 8, backgroundColor: backgroundColor = "var(--core-surface-secondary)", bgColor: bgColor = "var(--core-surface-secondary)", iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", paddingLeft: paddingLeft = "10px", paddingRight: paddingRight = "8px", paddingTop: paddingTop = "8px", paddingBottom: paddingBottom = "8px", borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange = () => null, onOption: onOption = () => null} = props, divAttributes = __rest(props, [ "name", "label", "labelColor", "textSize", "width", "height", "inline", "selectedIndex", "selectedValue", "valueKey", "options", "placeholder", "borderRadius", "backgroundColor", "bgColor", "iconColor", "textColor", "borderWidth", "borderSize", "borderColor", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onOption" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = useState("Select an option"), ref = useRef(null);
+    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, selectedIndex: selectedIndex, selectedValue: selectedValue, valueKey: valueKey, options: options = [], placeholder: placeholder = !0, borderRadius: borderRadius = corners["corner-m"], backgroundColor: backgroundColor = "var(--core-surface-secondary)", iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", paddingLeft: paddingLeft = "10px", paddingRight: paddingRight = "8px", paddingTop: paddingTop = "8px", paddingBottom: paddingBottom = "8px", borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange = () => null, onOption: onOption = () => null} = props, divAttributes = __rest(props, [ "name", "label", "labelColor", "textSize", "width", "height", "inline", "selectedIndex", "selectedValue", "valueKey", "options", "placeholder", "borderRadius", "backgroundColor", "iconColor", "textColor", "borderWidth", "borderSize", "borderColor", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onOption" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = useState("Select an option"), ref = useRef(null);
     useEffect(() => {
         if (null == selectedValue && void 0 !== selectedIndex && (null == ref ? void 0 : ref.current)) {
             if (!(null == options ? void 0 : options[selectedIndex])) return;

package/dist/esm/chunks/{ErrorSummary-CPsaqCL-.mjs → ErrorSummary-D1WbASIx.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,13 +13,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as addOpacity } from "./colors-C3CypePZ.mjs";
+import { a as addOpacity } from "./colors-Pe71RB3l.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
+
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -37,7 +39,7 @@ var css = {
 };
 
 const ErrorSummary = React.memo(props => {
-    const {current: current} = useTheme(), warning = current.colors["feedback-warning"], bg = addOpacity(warning, .1), {entries: entries, textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor, bgColor: bgColor = bg, autoNumber: autoNumber = !0} = props, divAttributes = __rest(props, [ "entries", "textSize", "textColor", "backgroundColor", "bgColor", "autoNumber" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, variants = useMemo(() => ({
+    const {current: current} = useTheme(), warning = current.colors["feedback-warning"], bg = addOpacity(warning, .1), {entries: entries, textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor = bg, autoNumber: autoNumber = !0} = props, divAttributes = __rest(props, [ "entries", "textSize", "textColor", "backgroundColor", "autoNumber" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, variants = useMemo(() => ({
         enter: {
             opacity: 0,
             maxHeight: 0

package/dist/esm/chunks/{FileIcon-Ckvm7EOw.mjs → FileIcon-CBNQckHc.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -11,13 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-GB29X0YR.mjs";
+import { a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
+
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 

package/dist/esm/chunks/{FileList-D0b6RxKc.mjs → FileList-CK96tECm.mjs}

@@ -1,17 +1,17 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-GB29X0YR.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import { F as FileIcon } from "./FileIcon-Ckvm7EOw.mjs";
+import { F as FileIcon } from "./FileIcon-CBNQckHc.mjs";
 
-import { I as Icon } from "./Icon-DGQB6Mfm.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-C8tli-Jg.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CNTW0t8s.mjs";
 
 /**
  * Split a file name into its display name and extension.
@@ -46,7 +46,7 @@ function displayClose(uploading) {
 }
 
 const FileList = React.memo(props => {
-    const {files: files = [], onChange: onChange, onToolTip: onToolTip, maxWidth: maxWidth, minWidth: minWidth, direction: direction = "row", padding: padding, gap: gap = 10, textSize: textSize = "s", iconSize: iconSize = 24, backgroundColor: backgroundColor, bgColor: bgColor, canRemove: canRemove = !0} = props, divAttributes = __rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "bgColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, fileNameToFileItem = useCallback(fileName => {
+    const {files: files = [], onChange: onChange, onToolTip: onToolTip, maxWidth: maxWidth, minWidth: minWidth, direction: direction = "row", padding: padding, gap: gap = 10, textSize: textSize = "s", iconSize: iconSize = 24, backgroundColor: backgroundColor, canRemove: canRemove = !0} = props, divAttributes = __rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, fileNameToFileItem = useCallback(fileName => {
         const {ext: ext, name: name} = function(fileName) {
             var _a;
             const ext = null !== (_a = fileName.split(".").pop()) && void 0 !== _a ? _a : "unknown";

package/dist/esm/chunks/{FlexDiv-D7wQNKz0.mjs → FlexDiv-Cglvd-xT.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/chunks/{Grouper-BrjPf1Zm.mjs → Grouper-CivlTYk2.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,17 +13,19 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
+
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Badge } from "./Badge-Cli_Ebpu.mjs";
+import { B as Badge } from "./Badge-DIru-w6O.mjs";
 
-import { I as Icon } from "./Icon-DGQB6Mfm.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
 var css_header = "Grouper-module_header__D5fV0 flexBox-module_rowBetween__5FEvi", css_title = "Grouper-module_title__ZKqTP flexBox-module_rowBetween__5FEvi type-module_body-m-regular__LuQBA", css_content = "Grouper-module_content__Mof50 flexBox-module_rowBetween__5FEvi", css_icon = "Grouper-module_icon__14Jis flexBox-module_row__z24tF";
 

package/dist/esm/chunks/{Icon-DGQB6Mfm.mjs → Icon-CGqm8lg7.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -11,13 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-GB29X0YR.mjs";
+import { a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
+
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 

package/dist/esm/chunks/{IconButton-Wffb0Rhg.mjs → IconButton-LsCK8HUU.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -7,13 +7,15 @@ import { motion } from "motion/react";
 
 import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
 
-import { B as Badge } from "./Badge-Cli_Ebpu.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { D as Dot } from "./Dot-Lyaimh03.mjs";
+import { B as Badge } from "./Badge-DIru-w6O.mjs";
 
-import { I as Icon } from "./Icon-DGQB6Mfm.mjs";
+import { D as Dot } from "./Dot-CWVfujdC.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-DqPH1p0Q.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
+
+import { T as ToolTipType } from "./sharedTypes-ySBopm8X.mjs";
 
 var AnimationPreset, AnimationType, css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
 
@@ -110,7 +112,7 @@ const presetAnimation = {
         transition: transition
     });
 }, IconButton = React.memo(props => {
-    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", presetAnimations: presetAnimations, customAnimations: customAnimations, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "presetAnimations", "customAnimations", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), [on, setOn] = useState(isToggled), [hovered, setHovered] = useState(!1);
+    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = corners["corner-xs"], border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorOn: backgroundColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", presetAnimations: presetAnimations, customAnimations: customAnimations, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "backgroundColor", "backgroundColorHover", "backgroundColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "presetAnimations", "customAnimations", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), [on, setOn] = useState(isToggled), [hovered, setHovered] = useState(!1);
     useEffect(() => setOn(isToggled), [ isToggled ]);
     const handleClick = useCallback(e => {
         disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
@@ -127,7 +129,7 @@ const presetAnimation = {
         onToolTip(tip);
     }, [ tooltip, onToolTip ]), handleMouseLeave = useCallback(() => {
         setHovered(!1), tooltip && onToolTip(null);
-    }, [ tooltip, onToolTip ]), bgColorNormal = useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = useMemo(() => ({
+    }, [ tooltip, onToolTip ]), bgColorNormal = useMemo(() => on ? backgroundColorOn : null != backgroundColor ? backgroundColor : "var(--core-surface-secondary)", [ backgroundColorOn, backgroundColor, on ]), bgHoverColor = useMemo(() => hover && on ? backgroundColorOn : hover ? backgroundColorHover : null != backgroundColor ? backgroundColor : "transparent", [ hover, backgroundColor, backgroundColorOn, backgroundColorHover, on ]), textColor = useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = useMemo(() => ({
         "--ib-bg-color": bgColorNormal,
         "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
         "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,

package/dist/esm/chunks/{IndexedDB-Cwb-PZNm.mjs → IndexedDB-DNFNyOit.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-DGRmn-gx.mjs";
+import { _ as __awaiter } from "./tslib.es6-uJhEruZV.mjs";
 
 class IndexedDB {
     constructor(storeName, options = {}) {
@@ -41,7 +41,8 @@ class IndexedDB {
      * Get a single DB value by key.
      */    get(key) {
         return __awaiter(this, void 0, void 0, function*() {
-            return this.runRequest("readonly", store => store.get(key));
+            const value = yield this.runRequest("readonly", store => store.get(key));
+            return null != value ? value : null;
         });
     }
     /**
@@ -60,15 +61,18 @@ class IndexedDB {
     }
     set(key, value) {
         return __awaiter(this, void 0, void 0, function*() {
-            return this.runRequest("readwrite", store => store.put(value, key));
+            return this.runRequest("readwrite", store => this.key ? store.put(value) : store.put(value, key));
         });
     }
     /**
      * Adds a new value to the store with or without a key.
      * If a key already exists it will error.
+     *
+     * As with `set()`, a store configured with an in-line key path must never
+     * be given an explicit key - it is always derived from the value.
      */    add(value, key) {
         return __awaiter(this, void 0, void 0, function*() {
-            return this.runRequest("readwrite", store => void 0 === key ? store.add(value) : store.add(value, key));
+            return this.runRequest("readwrite", store => this.key || void 0 === key ? store.add(value) : store.add(value, key));
         });
     }
     /**

package/dist/esm/chunks/{Label-BF7Bac6I.mjs → Label-CFUlmEKM.mjs}

@@ -1,11 +1,13 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
 import { useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import { corners } from "../theme/corners.mjs";
+
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
 var LabelBackground, css = {
     label: "Label-module_label__RaRvM",
@@ -24,7 +26,7 @@ function resolveSemanticBackground(backgroundColor) {
 }
 
 function Label(props) {
-    const {children: children, label: label, backgroundColor: backgroundColor, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", bgColor: bgColor = "transparent", borderRadius: borderRadius = 4, padding: padding, textColor: textColor = "var(--core-text-primary)", textSize: textSize = "s", onClick: onClick} = props, divAttributes = __rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "bgColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", isInteractive = Boolean(onClick), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, handleClick = useCallback(e => {
+    const {children: children, label: label, backgroundColor: backgroundColor = "transparent", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = corners["corner-xs"], padding: padding, textColor: textColor = "var(--core-text-primary)", textSize: textSize = "s", onClick: onClick} = props, divAttributes = __rest(props, [ "children", "label", "backgroundColor", "borderWidth", "borderSize", "borderColor", "borderRadius", "padding", "textColor", "textSize", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", isInteractive = Boolean(onClick), resolvedBackgroundColor = backgroundColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, handleClick = useCallback(e => {
         isInteractive && (null == onClick || onClick(e));
     }, [ isInteractive, onClick ]), setBgColor = useMemo(() => {
         if (!resolvedBackgroundColor) return "transparent";

package/dist/esm/chunks/{Level-DnWQ5mLH.mjs → Level-CAZN_Xt7.mjs}

@@ -1,20 +1,22 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { A as AudioVisualizer } from "./audioVisualizer-CLKL6Y79.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import { A as AudioVisualizer } from "./audioVisualizer-BO_hMyyp.mjs";
+
+import "./broadcastChannel-B8FxWRVj.mjs";
 
 var css_wrapper = "Level-module_wrapper__yOfXw", css_barContainer = "Level-module_barContainer__QMUdv", css_bar = "Level-module_bar__MnApX";
 
 const Level = React.memo(function(props) {
-    const {width: width = 100, height: height = 4, gap: gap = 0, audioStream: audioStream, playing: playing = !1, minIntensity: minIntensity = 0, maxIntensity: maxIntensity = 5, intensity: intensity = 3.5, peakIntensity: peakIntensity = .5, risePerSeconds: risePerSeconds = 4, releasePerSeconds: releasePerSeconds, ReleasePerSeconds: ReleasePerSeconds = 1.5, borderRadius: borderRadius = 4, borderColor: borderColor = "transparent", borderWidth: borderWidth = 0, colorActive: colorActive = "var(--feedback-positive)", backgroundColor: backgroundColor = "var(--core-surface-primary-tint)"} = props, divAttributes = __rest(props, [ "width", "height", "gap", "audioStream", "playing", "minIntensity", "maxIntensity", "intensity", "peakIntensity", "risePerSeconds", "releasePerSeconds", "ReleasePerSeconds", "borderRadius", "borderColor", "borderWidth", "colorActive", "backgroundColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", visualizerRef = useRef(null), [normalizedIntensity, setNormalizedIntensity] = useState(0), totalBars = Math.max(1, Math.floor(maxIntensity)), minBars = Math.max(0, Math.min(Math.floor(minIntensity), totalBars)), releaseRate = null != releasePerSeconds ? releasePerSeconds : ReleasePerSeconds, intensityIntervals = useMemo(() => new Array(totalBars).fill(0).map((_, index) => index), [ totalBars ]), activeBars = useMemo(() => {
+    const {width: width = 100, height: height = 4, gap: gap = 0, audioStream: audioStream, playing: playing = !1, minIntensity: minIntensity = 0, maxIntensity: maxIntensity = 5, intensity: intensity = 3.5, peakIntensity: peakIntensity = .5, risePerSeconds: risePerSeconds = 4, releasePerSeconds: releasePerSeconds, ReleasePerSeconds: ReleasePerSeconds = 1.5, borderRadius: borderRadius = corners["corner-xs"], borderColor: borderColor = "transparent", borderWidth: borderWidth = 0, colorActive: colorActive = "var(--feedback-positive)", backgroundColor: backgroundColor = "var(--core-surface-primary-tint)"} = props, divAttributes = __rest(props, [ "width", "height", "gap", "audioStream", "playing", "minIntensity", "maxIntensity", "intensity", "peakIntensity", "risePerSeconds", "releasePerSeconds", "ReleasePerSeconds", "borderRadius", "borderColor", "borderWidth", "colorActive", "backgroundColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", visualizerRef = useRef(null), [normalizedIntensity, setNormalizedIntensity] = useState(0), totalBars = Math.max(1, Math.floor(maxIntensity)), minBars = Math.max(0, Math.min(Math.floor(minIntensity), totalBars)), releaseRate = null != releasePerSeconds ? releasePerSeconds : ReleasePerSeconds, intensityIntervals = useMemo(() => new Array(totalBars).fill(0).map((_, index) => index), [ totalBars ]), activeBars = useMemo(() => {
         const scaledBars = Math.round(minBars + normalizedIntensity * (totalBars - minBars));
         return Math.max(minBars, Math.min(scaledBars, totalBars));
     }, [ minBars, normalizedIntensity, totalBars ]), visualizerSettings = useMemo(() => ({

package/dist/esm/chunks/{Modal-BuDVEntK.mjs → Modal-DAU9VnrP.mjs}

@@ -1,17 +1,19 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { B as Button } from "./Button-BdxJ4wnE.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { I as Icon } from "./Icon-DGQB6Mfm.mjs";
+import { B as Button } from "./Button-BYALDfuE.mjs";
 
-import { I as IconButton } from "./IconButton-Wffb0Rhg.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
+
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
 var css = {
     wrapper: "Modal-module_wrapper__34Hds flexBox-module_columnBetween__ERfp7",
@@ -31,7 +33,7 @@ var css = {
 };
 
 const Modal = React.memo(props => {
-    const {children: children, id: id, className: className, style: style, minWidth: minWidth = 300, minHeight: minHeight = 200, maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, titleTextSize: titleTextSize = "l", contentTextSize: contentTextSize = "m", actions: actions, titleIcon: titleIcon, titleIconFill: titleIconFill = !0, titleBorderColor: titleBorderColor = "var(--core-outline-primary)", titleBorderWidth: titleBorderWidth = 0, actionsBorderColor: actionsBorderColor = "var(--core-outline-primary)", actionsBorderWidth: actionsBorderWidth = 0, autoBorderBottom: autoBorderBottom = !0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", scrollHandleColor: scrollHandleColor = "var(--core-text-disabled)", scrollHandleColorHover: scrollHandleColorHover = "var(--core-text-disabled)", titleColor: titleColor = "var(--core-text-special)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = 8, borderWidth: borderWidth = 1} = props, rest = __rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleTextSize", "contentTextSize", "actions", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "autoBorderBottom", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "scrollHandleColor", "scrollHandleColorHover", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), contentWrapperRef = useRef(null), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", [scrolls, setScrolls] = useState(!1), getScrolls = useCallback(() => {
+    const {children: children, id: id, className: className, style: style, minWidth: minWidth = 300, minHeight: minHeight = 200, maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, titleTextSize: titleTextSize = "l", contentTextSize: contentTextSize = "m", actions: actions, titleIcon: titleIcon, titleIconFill: titleIconFill = !0, titleBorderColor: titleBorderColor = "var(--core-outline-primary)", titleBorderWidth: titleBorderWidth = 0, actionsBorderColor: actionsBorderColor = "var(--core-outline-primary)", actionsBorderWidth: actionsBorderWidth = 0, autoBorderBottom: autoBorderBottom = !0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", scrollHandleColor: scrollHandleColor = "var(--core-text-disabled)", scrollHandleColorHover: scrollHandleColorHover = "var(--core-text-disabled)", titleColor: titleColor = "var(--core-text-special)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = corners["corner-m"], borderWidth: borderWidth = 1} = props, rest = __rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleTextSize", "contentTextSize", "actions", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "autoBorderBottom", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "scrollHandleColor", "scrollHandleColorHover", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), contentWrapperRef = useRef(null), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", [scrolls, setScrolls] = useState(!1), getScrolls = useCallback(() => {
         var _a, _b;
         const height = null === (_a = contentWrapperRef.current) || void 0 === _a ? void 0 : _a.offsetHeight, scrollHeight = null === (_b = contentWrapperRef.current) || void 0 === _b ? void 0 : _b.scrollHeight;
         return !(!height || !scrollHeight) && height < scrollHeight;
@@ -105,6 +107,7 @@ const Modal = React.memo(props => {
                     className: css.titleIcon,
                     children: jsx(IconButton, {
                         tooltip: "close",
+                        "aria-label": "close",
                         icon: "x",
                         onClick: () => {
                             null == onReject || onReject(new Error("Modal was closed", {

package/dist/esm/chunks/{ModalController-CWZBh7Dg.mjs → ModalController-axF12LqY.mjs}

@@ -5,13 +5,15 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef } from "react";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
-import { O as Overlay } from "./Overlay-DXAULyRd.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import { u as useModal, a as useModalActions } from "./modalStore-DN1F_WR9.mjs";
+import { O as Overlay } from "./Overlay-CYvVXNU5.mjs";
+
+import { u as useModal, a as useModalActions } from "./modalStore-CBW78_cT.mjs";
 
 var css_container = "ModalController-module_container__3cSaO", css_box = "ModalController-module_box__cPzOz", css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
 

package/dist/esm/chunks/{Overlay-DXAULyRd.mjs → Overlay-CYvVXNU5.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -13,7 +13,7 @@ const defaultTransition = {
     ease: "easeOut",
     duration: .25
 }, Overlay = React.memo(props => {
-    const {children: children, show: show = !1, type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity = 0, transition: transition = defaultTransition, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
+    const {children: children, show: show = !1, type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity, transition: transition = defaultTransition, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
         global && toggleOverlay(!1), onClick();
     }, [ global, toggleOverlay, onClick ]), handleContextMenu = useCallback(e => {
         e.preventDefault();