@apple-pie/slice 0.1.51 → 0.1.53

package/dist/esm/chunks/{Chip-Cy_9aGFx.mjs → Chip-COWEFzyh.mjs}

@@ -1,15 +1,17 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-h1aSeCm2.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
+
+import { T as ToolTipType } from "./sharedTypes-ySBopm8X.mjs";
 
 var css = {
     chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
@@ -17,11 +19,12 @@ var css = {
     xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",
     s: "Chip-module_s__2KTXi type-module_body-s-regular__vRHSP",
     m: "Chip-module_m__l2u3N type-module_body-m-regular__LuQBA",
-    l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg"
+    l: "Chip-module_l__3MqPN type-module_body-l-regular__lOYbg",
+    xl: "Chip-module_xl__iJX-F type-module_body-xl-regular__pF2kC"
 };
 
 const Chip = React.memo(props => {
-    const {variant: variant = "normal", children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = ("normal" === variant ? labelColor : "var(--core-text-special)"), iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = ("normal" === variant ? iconColor : "var(--core-text-special)"), backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = ("normal" === variant ? borderColor : "var(--core-text-special)"), borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", bgColor: bgColor = "transparent", bgColorHover: bgColorHover = ("normal" === variant ? bgColor : "var(--core-surface-secondary)"), borderRadius: borderRadius = 8, paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "variant", "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "bgColor", "bgColorHover", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = useCallback(e => {
+    const {variant: variant = "normal", children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = ("normal" === variant ? labelColor : "var(--core-text-special)"), iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = ("normal" === variant ? iconColor : "var(--core-text-special)"), backgroundColor: backgroundColor = "transparent", backgroundColorHover: backgroundColorHover = ("normal" === variant ? backgroundColor : "var(--core-surface-secondary)"), borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = ("normal" === variant ? borderColor : "var(--core-text-special)"), borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", borderRadius: borderRadius = corners["corner-m"], paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "variant", "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = useCallback(e => {
         disabled || onClick(e);
     }, [ disabled, onClick ]), handleMouseEnter = useCallback((enter, event) => {
         if (enter) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-CV0SS-jF.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-m6fw22Z0.mjs → Dot-CWVfujdC.mjs}

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

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

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,15 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { p as pointerPosition } from "./misc-CV0SS-jF.mjs";
+import { p as pointerPosition } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -51,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(() => {
@@ -90,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);
@@ -126,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;
@@ -157,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}`,
@@ -166,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-BczM9aTO.mjs → DropDown-C9fS9E6c.mjs}

@@ -1,13 +1,15 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.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",
@@ -18,6 +20,7 @@ var css = {
     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",
     chevron: "DropDown-module_chevron__LkYsE flexBox-module_rowStart__4tcxS",
     select: "DropDown-module_select__mzNnv"
 };
@@ -27,7 +30,7 @@ function resolveValueKey(value, valueKey) {
 }
 
 function DropDownComponent(props) {
-    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", size: size = "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", "size", "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;
@@ -78,10 +81,10 @@ function DropDownComponent(props) {
         style: Object.assign(Object.assign({}, divStyle), cssVars)
     }, rest, {
         children: [ label && jsx("span", {
-            className: `${css.label} ${css[size]}`,
+            className: `${css.label} ${css[textSize]}`,
             children: label
         }), jsx("span", {
-            className: `${css.face} ${css[size]}`,
+            className: `${css.face} ${css[textSize]}`,
             children: jsx("span", {
                 className: css.faceText,
                 children: displayText

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

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,15 +13,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as addOpacity } from "./colors-6NoVF74x.mjs";
+import { a as addOpacity } from "./colors-Pe71RB3l.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -34,11 +34,12 @@ var css = {
     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"
+    l: "ErrorSummary-module_l__bb1xZ type-module_body-l-regular__lOYbg",
+    xl: "ErrorSummary-module_xl__SaVRd type-module_body-xl-regular__pF2kC"
 };
 
 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-SKFp6-Eh.mjs → FileIcon-CBNQckHc.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -11,15 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 

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

@@ -1,17 +1,17 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-CV0SS-jF.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import { F as FileIcon } from "./FileIcon-SKFp6-Eh.mjs";
+import { F as FileIcon } from "./FileIcon-CBNQckHc.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CGbLu2wM.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, size: size = "s", iconSize: iconSize = 24, backgroundColor: backgroundColor, bgColor: bgColor, canRemove: canRemove = !0} = props, divAttributes = __rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "size", "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";
@@ -173,7 +173,7 @@ const FileList = React.memo(props => {
     }, rest, {
         children: displayList.map(i => {
             return jsxs("div", {
-                className: `${css.file} ${css[size]}`,
+                className: `${css.file} ${css[textSize]}`,
                 style: fileCSSVars(i.progress, i.error),
                 children: [ jsx("div", {
                     className: css.fileIcon,

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

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

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

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,19 +13,19 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Badge } from "./Badge-C6kNwu4r.mjs";
+import { B as Badge } from "./Badge-DIru-w6O.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.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-BMT9cn9A.mjs → Icon-CGqm8lg7.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -11,15 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 

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

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-C6kNwu4r.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { D as Dot } from "./Dot-m6fw22Z0.mjs";
+import { B as Badge } from "./Badge-DIru-w6O.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { D as Dot } from "./Dot-CWVfujdC.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-h1aSeCm2.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-BvJLLZU8.mjs → IndexedDB-DNFNyOit.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-p9eD9VLE.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-Etcumudw.mjs → Label-CFUlmEKM.mjs}

@@ -1,11 +1,13 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
+
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
 var LabelBackground, css = {
     label: "Label-module_label__RaRvM",
@@ -13,7 +15,8 @@ var LabelBackground, css = {
     xs: "Label-module_xs__K9Ai6 type-module_body-xs-regular__ZAFft",
     s: "Label-module_s__Zh8Gp type-module_body-s-regular__vRHSP",
     m: "Label-module_m__BJtGL type-module_body-m-regular__LuQBA",
-    l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg"
+    l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg",
+    xl: "Label-module_xl__bX0ub type-module_body-xl-regular__pF2kC"
 };
 
 function resolveSemanticBackground(backgroundColor) {
@@ -23,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-C2rSTZAQ.mjs → Level-CAZN_Xt7.mjs}

@@ -1,20 +1,22 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.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-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { A as AudioVisualizer } from "./audioVisualizer-B7i2Eluw.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.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(() => ({