@apple-pie/slice 0.1.32 → 0.1.34

package/dist/esm/chunks/{PromptInput-Cn5fRYap.mjs → PromptInput-DbT3sVeA.mjs}

@@ -7,13 +7,21 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import "./tslib.es6-C81Qhn1z.mjs";
+import "./tslib.es6-75ZdAmtm.mjs";
+
+import { s as setStyle } from "./misc-BQH7I5Zj.mjs";
+
+import "./webRTCStore-Ck8TCzr_.mjs";
+
+import "./microphoneStore-uYs2NQQx.mjs";
+
+import "./volumeStore-C0iU07fK.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-BIgwWrPJ.mjs";
+import { B as Button } from "./Button-v92U2QVV.mjs";
 
-import { F as FileList } from "./FileList-vMiGJByw.mjs";
+import { F as FileList } from "./FileList-CnuT4Llg.mjs";
 
 var css = {
     wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
@@ -30,15 +38,17 @@ var css = {
 };
 
 const PromptInputBase = React.forwardRef((props, ref) => {
-    const {children: children, attachments: attachments = [], value: value = "", working: working = !1, maxHeight: maxHeight, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = 8, focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, submitEnablesStop: submitEnablesStop = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = useTheme(), [isFocused, setIsFocused] = useState(null != focused && focused), [isWorking, setIsWorking] = useState(null != working && working), [isStopEnabled, setIsStopEnabled] = useState(stopEnabled), [textValue, setTextValue] = useState(value), textAreaRef = useRef(null), handleFocus = useCallback(() => {
+    const {children: children, attachments: attachments = [], value: value = "", width: width = "100%", maxWidth: maxWidth, minWidth: minWidth, working: working = !1, maxHeight: maxHeight, attachmentsDisabled: attachmentsDisabled = !1, submitWorking: submitWorking = !1, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = 8, focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = useTheme(), [isFocused, setIsFocused] = useState(null != focused && focused), [textValue, setTextValue] = useState(value), textAreaRef = useRef(null), handleFocus = useCallback(() => {
         var _a, _b;
         setIsFocused(!0), null === (_a = null == textAreaRef ? void 0 : textAreaRef.current) || void 0 === _a || _a.focus(), 
         null == onFocus || onFocus(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
-    }, [ onFocus, attachments ]), handleBlur = useCallback(() => {
+    }, [ onFocus, attachments ]), handleBlur = useCallback(valueOverride => {
         var _a, _b;
         setIsFocused(!1), null === (_a = textAreaRef.current) || void 0 === _a || _a.blur(), 
-        null == onBlur || onBlur(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
-    }, [ onBlur, attachments ]), handleAttachmentsChange = useCallback(newFiles => {
+        null == onBlur || onBlur(null != valueOverride ? valueOverride : null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
+    }, [ onBlur, attachments ]), handleTextAreaBlur = useCallback(() => {
+        handleBlur();
+    }, [ handleBlur ]), handleAttachmentsChange = useCallback(newFiles => {
         var _a;
         null == onAttachmentsChange || onAttachmentsChange(newFiles), null == onChange || onChange(null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value, newFiles);
     }, [ onAttachmentsChange, onChange ]), handleChange = useCallback(e => {
@@ -46,47 +56,46 @@ const PromptInputBase = React.forwardRef((props, ref) => {
         setTextValue(newValue), null == onChange || onChange(newValue, attachments);
     }, [ onChange, attachments ]), handleSubmit = useCallback(() => {
         var _a;
-        if (isWorking || isStopEnabled) return;
+        if (stopEnabled) return;
+        if (working && submitWorking) return;
         const currentValue = null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value;
-        currentValue && (null == onSubmit || onSubmit(currentValue, attachments), setIsWorking(!0), 
-        submitClears && setTextValue(""), submitEnablesStop && setIsStopEnabled(!0), handleBlur());
-    }, [ submitClears, onSubmit, handleBlur, submitEnablesStop, isWorking, isStopEnabled, attachments ]), handleStop = useCallback(() => {
-        setIsWorking(!1), setIsStopEnabled(!1), null == onStop || onStop(), handleFocus();
+        currentValue && (null == onSubmit || onSubmit(currentValue, attachments), submitClears && (setTextValue(""), 
+        null == onChange || onChange("", attachments), textAreaRef.current && (textAreaRef.current.value = "")), 
+        handleBlur(submitClears ? "" : currentValue));
+    }, [ stopEnabled, submitClears, onChange, onSubmit, handleBlur, attachments, working, submitWorking ]), handleStop = useCallback(() => {
+        null == onStop || onStop(), handleFocus();
     }, [ onStop, handleFocus ]), handleKeyDown = useCallback(e => {
-        if ("Enter" === e.key && enterSubmits) {
-            if (e.preventDefault(), isWorking) return;
-            handleSubmit();
-        }
-    }, [ handleSubmit, isWorking, enterSubmits ]), handleClickSend = useCallback(e => {
-        e.preventDefault(), e.stopPropagation(), isWorking && !isStopEnabled || (isStopEnabled ? handleStop() : handleSubmit());
-    }, [ handleSubmit, handleStop, isStopEnabled, isWorking ]), handleClickAttach = useCallback(e => {
+        "Enter" === e.key && enterSubmits && (e.preventDefault(), handleSubmit());
+    }, [ handleSubmit, enterSubmits ]), handleClickSend = useCallback(e => {
+        e.preventDefault(), e.stopPropagation(), stopEnabled ? handleStop() : handleSubmit();
+    }, [ handleSubmit, handleStop, stopEnabled ]), handleClickAttach = useCallback(e => {
         e.preventDefault(), e.stopPropagation();
     }, []), handleClickButtonBar = useCallback(e => {
-        e.preventDefault(), isWorking || handleFocus();
-    }, [ handleFocus, isWorking ]), setBorderColor = useMemo(() => {
+        e.preventDefault(), handleFocus();
+    }, [ handleFocus ]), setBorderColor = useMemo(() => {
         if ("gradient" === borderStyle) {
             const radial = isDark ? "var(--conic-gradient-dark)" : "var(--conic-gradient-light)";
-            return isWorking && borderAnimate ? radial : isFocused ? null != borderColorOn ? borderColorOn : radial : null != borderColor ? borderColor : radial;
+            return working && borderAnimate ? radial : isFocused ? null != borderColorOn ? borderColorOn : radial : null != borderColor ? borderColor : radial;
         }
-        return "solid" === borderStyle ? isWorking || isFocused ? null != borderColorOn ? borderColorOn : "var(--core-outline-special)" : null != borderColor ? borderColor : "transparent" : "transparent";
-    }, [ borderStyle, isFocused, borderColorOn, borderColor, isWorking, borderAnimate, isDark ]), setPlaceholder = useMemo(() => isWorking && placeholderWorking ? placeholderWorking : placeholder, [ isWorking, placeholder, placeholderWorking ]), setSendIconColor = useMemo(() => isStopEnabled || isWorking ? "var(--core-text-primary)" : "" !== textValue ? "var(--core-text-light)" : "var(--core-text-disabled)", [ textValue, isWorking, isStopEnabled ]), sendButtonState = useMemo(() => isStopEnabled || "" !== textValue || isWorking ? "normal" : "disabled", [ textValue, isStopEnabled, isWorking ]), attachState = useMemo(() => isWorking ? "disabled" : "normal", [ isWorking ]);
+        return "solid" === borderStyle ? working || isFocused ? null != borderColorOn ? borderColorOn : "var(--core-outline-special)" : null != borderColor ? borderColor : "transparent" : "transparent";
+    }, [ borderStyle, isFocused, borderColorOn, borderColor, working, borderAnimate, isDark ]), setPlaceholder = useMemo(() => working && placeholderWorking ? placeholderWorking : placeholder, [ working, placeholder, placeholderWorking ]), setSendIconColor = useMemo(() => stopEnabled ? "var(--core-text-primary)" : "" !== textValue ? "var(--core-text-light)" : "var(--core-text-disabled)", [ textValue, stopEnabled ]), sendButtonState = useMemo(() => working && submitWorking || stopEnabled ? "normal" : "" === textValue ? "disabled" : "normal", [ textValue, stopEnabled, working, submitWorking ]), attachState = useMemo(() => attachmentsDisabled ? "disabled" : "normal", [ attachmentsDisabled ]);
     useEffect(() => {
         var _a, _b;
         focused ? null === (_a = textAreaRef.current) || void 0 === _a || _a.focus() : null === (_b = textAreaRef.current) || void 0 === _b || _b.blur();
     }, [ focused ]), useEffect(() => {
-        var _a;
-        (null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value) !== value && setTextValue(value);
-    }, [ value ]), useEffect(() => {
-        void 0 !== working && setIsWorking(working);
-    }, [ working ]), useEffect(() => setIsStopEnabled(stopEnabled), [ stopEnabled ]);
+        setTextValue(value);
+    }, [ value ]);
     const cssVars = useMemo(() => ({
+        "--prompt-width": setStyle(width),
+        "--prompt-min-width": setStyle(minWidth, "unset"),
+        "--prompt-max-width": setStyle(maxWidth, "unset"),
         "--prompt-border-color": setBorderColor,
         "--prompt-max-height": maxHeight ? `${maxHeight}px` : "unset",
         "--prompt-border-width": borderWidth ? `${borderWidth}px` : "0",
-        "--prompt-state": isWorking && borderAnimate ? "running" : "paused",
+        "--prompt-state": working && borderAnimate ? "running" : "paused",
         "--prompt-border-radius": borderRadius ? `${borderRadius}px` : "8px",
         "--prompt-inner-border-radius": borderRadius ? borderRadius - 1 + "px" : "7px"
-    }), [ isWorking, borderAnimate, setBorderColor, borderWidth, borderRadius, maxHeight ]);
+    }), [ working, borderAnimate, setBorderColor, borderWidth, borderRadius, maxHeight, width, maxWidth, minWidth ]);
     return jsx("div", {
         className: css.wrapperBg,
         ref: ref,
@@ -113,7 +122,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
                 onChange: handleChange,
                 placeholder: setPlaceholder,
                 onFocus: handleFocus,
-                onBlur: handleBlur,
+                onBlur: handleTextAreaBlur,
                 onKeyDown: handleKeyDown,
                 maxLength: maxLength,
                 rows: 1
@@ -137,13 +146,13 @@ const PromptInputBase = React.forwardRef((props, ref) => {
                 }), sendButton && jsx(Button, {
                     round: !0,
                     label: void 0,
-                    variant: isStopEnabled ? "outline" : "solid",
-                    iconLeft: isStopEnabled ? "stop" : "arrow up",
-                    iconSize: isStopEnabled ? 16 : 20,
+                    variant: stopEnabled ? "outline" : "solid",
+                    iconLeft: stopEnabled ? "stop" : "arrow up",
+                    iconSize: stopEnabled ? 16 : 20,
                     state: sendButtonState,
                     bgColorDisabled: "var(--core-outline-primary)",
-                    progress: !isStopEnabled,
-                    working: !isStopEnabled && isWorking,
+                    progress: !stopEnabled,
+                    working: submitWorking && working,
                     onMouseDown: handleClickSend,
                     iconColor: setSendIconColor
                 }) ]

package/dist/esm/chunks/{RadioButton-DWlg6ldv.mjs → RadioButton-DUzPaLKa.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-2MIIqzsX.mjs";
+import { s as setStyle } from "./misc-BQH7I5Zj.mjs";
 
-import { I as Icon } from "./Icon-D4A6_c4x.mjs";
+import { I as Icon } from "./Icon-CbDAKN_S.mjs";
 
 var css_wrapper = "RadioButton-module_wrapper__-pWRe flexBox-module_row__z24tF", css_radioIcon = "RadioButton-module_radioIcon__I27Xv flexBox-module_column__ezvMq", css_radioTitle = "RadioButton-module_radioTitle__zCQII flexBox-module_rowStart__4tcxS type-module_body-m-regular__LuQBA", css_radioContent = "RadioButton-module_radioContent__38xVx flexBox-module_columnStart__C7P44";
 

package/dist/esm/chunks/{RadioButtonList-D9FdlhPL.mjs → RadioButtonList-NjEGYpj4.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useId, useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-2MIIqzsX.mjs";
+import { s as setStyle } from "./misc-BQH7I5Zj.mjs";
 
-import { R as RadioButton } from "./RadioButton-DWlg6ldv.mjs";
+import { R as RadioButton } from "./RadioButton-DUzPaLKa.mjs";
 
 var css_wrapper = "RadioButtonList-module_wrapper__wnq1-", css_column = "RadioButtonList-module_column__Bq16e flexBox-module_columnStart__C7P44", css_row = "RadioButtonList-module_row__D3szq flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{Slider-B2WZkZSg.mjs → Slider-Bvnhqzjx.mjs}

@@ -1,15 +1,25 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useRef, useState, useMemo, useCallback, useEffect } from "react";
 
-import { useObserveResize } from "../hooks/useObserveResize.mjs";
+import "../theme/colors.mjs";
+
+import { p as pointerPosition } from "./misc-BQH7I5Zj.mjs";
+
+import { d as debounce } from "./debounce-DpPYyz3x.mjs";
+
+import "./webRTCStore-Ck8TCzr_.mjs";
 
-import { d as debounce } from "./debounce-CYBH5qXQ.mjs";
+import "./microphoneStore-uYs2NQQx.mjs";
 
-import { p as pointerPosition } from "./misc-2MIIqzsX.mjs";
+import "./volumeStore-C0iU07fK.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
 
 var css_wrapper = "Slider-module_wrapper__KCCs1", css_trackBg = "Slider-module_trackBg__7zfqm flexBox-module_rowStart__4tcxS", css_track = "Slider-module_track__kaJkL flexBox-module_rowStart__4tcxS", css_trackHead = "Slider-module_trackHead__W-UdG", css_trackWrapper = "Slider-module_trackWrapper__Ot0Wh flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{Spacer-7Oj0SlD0.mjs → Spacer-B2JAN7e8.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/chunks/{Switch-DRhnznnO.mjs → Switch-CspvY_DQ.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/chunks/{TabBar-D6VR71ye.mjs → TabBar-BlvOUGJx.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -9,17 +9,36 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
+import { s as setStyle } from "./misc-BQH7I5Zj.mjs";
+
+import "./webRTCStore-Ck8TCzr_.mjs";
+
+import "./microphoneStore-uYs2NQQx.mjs";
+
+import "./volumeStore-C0iU07fK.mjs";
+
 import "../hooks/useWindow.mjs";
 
-import { B as Badge } from "./Badge-DuUb5-80.mjs";
+import { B as Badge } from "./Badge-DHvo2-ZQ.mjs";
 
-import { I as Icon } from "./Icon-D4A6_c4x.mjs";
+import { I as Icon } from "./Icon-CbDAKN_S.mjs";
 
-import { I as IconButton } from "./IconButton-B_W-aOsB.mjs";
+import { I as IconButton } from "./IconButton-nOcdRqR3.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-CyrInj1b.mjs";
+import { T as ToolTipType } from "./sharedTypes-DoNQkNSM.mjs";
 
-var css_wrapper = "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS", css_option = "TabBar-module_option__gYjDf flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_icon = "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF", css_close = "TabBar-module_close__bvSBh flexBox-module_row__z24tF";
+var css = {
+    wrapper: "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS",
+    option: "TabBar-module_option__gYjDf flexBox-module_row__z24tF",
+    icon: "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF",
+    close: "TabBar-module_close__bvSBh flexBox-module_row__z24tF",
+    xs: "TabBar-module_xs__QDjV9 type-module_body-xs-regular__ZAFft",
+    s: "TabBar-module_s__-EBj2 type-module_body-s-regular__vRHSP",
+    m: "TabBar-module_m__3sCA3 type-module_body-m-regular__LuQBA",
+    l: "TabBar-module_l__hy1rR type-module_body-l-regular__lOYbg",
+    xl: "TabBar-module_xl__zaASU type-module_body-xl-regular__pF2kC",
+    selected: "TabBar-module_selected__UmBdu"
+};
 
 const placeholderOptions = [ {
     name: "Light",
@@ -30,7 +49,7 @@ const placeholderOptions = [ {
     value: "Option 2",
     icon: "moon full"
 } ], TabBar = React.memo(props => {
-    const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "fill", padding: padding = 8, iconFill: iconFill = !1, iconSize: iconSize = 20, iconGap: iconGap = 8, tabGap: tabGap = 0, disabled: disabled = !1, hasClose: hasClose = !1, closeWidth: closeWidth = "auto", selectedValue: selectedValue = null, onChange: onChange = () => null, onTabChange: onTabChange = () => null, onClose: onClose = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconFill", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected), optionRefs = useRef([]);
+    const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "fill", padding: padding = 8, iconFill: iconFill = !1, iconSize: iconSize = 20, iconGap: iconGap = 8, tabGap: tabGap = 0, disabled: disabled = !1, hasClose: hasClose = !1, closeWidth: closeWidth = "auto", selectedValue: selectedValue = null, justify: justify = "start", borderColor: borderColor = "var(--core-outline-secondary)", textSize: textSize = "m", onChange: onChange = () => null, onTabChange: onTabChange = () => null, onClose: onClose = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconFill", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "justify", "borderColor", "textSize", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected), optionRefs = useRef([]);
     useEffect(() => {
         let selectedIndex = 0;
         selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
@@ -82,26 +101,30 @@ const placeholderOptions = [ {
         underline: underline,
         iconFill: iconFill,
         tabWidth: tabWidth,
+        textSize: textSize,
+        borderColor: borderColor,
         buttonRef: element => {
             optionRefs.current[i] = element;
         }
-    }, `${i}_option_${option.name}`)), [ options, index, padding, iconSize, iconGap, disabled, underline, tabWidth, onToolTip, handleOptionClick, iconFill, handleOptionKeyDown ]), setStyle = useCallback(value => "string" == typeof value ? value : `${value}px`, []), cssVars = useMemo(() => ({
+    }, `${i}_option_${option.name}`)), [ options, index, padding, iconSize, iconGap, disabled, underline, tabWidth, onToolTip, handleOptionClick, iconFill, handleOptionKeyDown, textSize ]), cssVars = useMemo(() => ({
         "--tab-bar-gap": `${tabGap}px`,
         "--tab-bar-height": `${setStyle(height)}px`,
         "--tab-bar-width": setStyle(width),
         "--tab-bar-border-bottom": "" + (border ? "1px" : "0"),
+        "--tab-bar-border-color": borderColor,
+        "--tab-bar-justify": justify,
         "--tab-bar-close-width": `${closeWidth}px`,
-        "--tab-bar-close-padding": padding ? `${padding}px` : "8px"
-    }), [ tabGap, height, width, border, setStyle, closeWidth, padding ]);
+        "--tab-bar-close-padding": setStyle(padding, "8px")
+    }), [ tabGap, height, width, border, closeWidth, padding, borderColor, justify ]);
     return jsxs("div", Object.assign({
         id: divId,
-        className: `${css_wrapper}${divClass}`,
+        className: `${css.wrapper}${divClass}`,
         style: Object.assign(Object.assign({}, divStyle), cssVars),
         role: "tablist",
         "aria-orientation": "horizontal"
     }, rest, {
         children: [ renderedOptions, hasClose && jsx("div", {
-            className: css_close,
+            className: css.close,
             children: jsx(IconButton, {
                 iconSize: iconSize - 4,
                 frameSize: iconSize,
@@ -118,7 +141,7 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "fill", count: count = 0, iconFill: iconFill = !1, onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
+    const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "fill", borderColor: borderColor = "var(--core-outline-secondary)", count: count = 0, iconFill: iconFill = !1, textSize: textSize = "m", onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
         if (onToolTip(null), showToolTip && ref.current) {
             const tip = {
                 type: ToolTipType.button,
@@ -134,17 +157,18 @@ const Option = React.memo(props => {
         showToolTip && onToolTip(null);
     }, [ showToolTip, onToolTip ]), textColor = useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = useMemo(() => "compact" === tabWidth ? "min-content" : "fill" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = useMemo(() => "fill" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = useMemo(() => ({
         "--tab-bar-option-border": setUnderline,
-        "--tab-bar-option-padding": `${padding}px`,
+        "--tab-bar-option-border-color": borderColor,
+        "--tab-bar-option-padding": setStyle(padding, "8px"),
         "--tab-bar-option-icon-size": `${iconSize}px`,
         "--tab-bar-option-cursor": disabled ? "default" : "pointer",
         "--tab-bar-option-gap": `${null != iconGap ? iconGap : 0}px`,
         "--tab-bar-option-color": textColor,
         "--tab-bar-option-width": setTabWidth,
         "--tab-bar-option-flex": setTabFlex
-    }), [ padding, iconSize, disabled, textColor, iconGap, setTabFlex, setTabWidth, setUnderline ]);
+    }), [ padding, iconSize, disabled, textColor, iconGap, setTabFlex, setTabWidth, setUnderline, borderColor ]);
     return jsxs("button", {
         type: "button",
-        className: css_option,
+        className: `${css.option} ${css[textSize]} ${selected ? css.selected : ""}`,
         style: cssVars,
         ref: element => {
             ref.current = element, null == buttonRef || buttonRef(element);
@@ -157,7 +181,7 @@ const Option = React.memo(props => {
         onClick: () => onClick(value),
         onKeyDown: e => onKeyDown(e, value),
         children: [ icon && jsx("div", {
-            className: css_icon,
+            className: css.icon,
             children: jsx(Icon, {
                 name: icon,
                 fill: iconFill,
@@ -170,7 +194,7 @@ const Option = React.memo(props => {
             count: count
         }) ]
     });
-}, (prevProps, nextProps) => prevProps.selected === nextProps.selected && prevProps.underline === nextProps.underline && prevProps.tabWidth === nextProps.tabWidth && prevProps.disabled === nextProps.disabled && prevProps.iconGap === nextProps.iconGap && prevProps.iconSize === nextProps.iconSize && prevProps.count === nextProps.count && prevProps.label === nextProps.label && prevProps.icon === nextProps.icon);
+}, (prevProps, nextProps) => prevProps.selected === nextProps.selected && prevProps.underline === nextProps.underline && prevProps.tabWidth === nextProps.tabWidth && prevProps.disabled === nextProps.disabled && prevProps.iconGap === nextProps.iconGap && prevProps.iconSize === nextProps.iconSize && prevProps.count === nextProps.count && prevProps.label === nextProps.label && prevProps.icon === nextProps.icon && prevProps.borderColor === nextProps.borderColor && prevProps.textSize === nextProps.textSize && prevProps.padding === nextProps.padding);
 
 Option.displayName = "TabOption";
 

package/dist/esm/chunks/{TextArea-CkB5rJjI.mjs → TextArea-BpMTGopK.mjs}

@@ -1,11 +1,11 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { B as Button } from "./Button-BIgwWrPJ.mjs";
+import { B as Button } from "./Button-v92U2QVV.mjs";
 
 var css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0", css_send = "TextArea-module_send__Cub13", css_xs = "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft", css_s = "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP", css_m = "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA", css_l = "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg";
 

package/dist/esm/chunks/{TextField-BIXmkjEz.mjs → TextField-DELrBLOa.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,15 +11,21 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle } from "./misc-2MIIqzsX.mjs";
+import { s as setStyle } from "./misc-BQH7I5Zj.mjs";
+
+import "./webRTCStore-Ck8TCzr_.mjs";
+
+import "./microphoneStore-uYs2NQQx.mjs";
+
+import "./volumeStore-C0iU07fK.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-BIgwWrPJ.mjs";
+import { B as Button } from "./Button-v92U2QVV.mjs";
 
-import { I as Icon } from "./Icon-D4A6_c4x.mjs";
+import { I as Icon } from "./Icon-CbDAKN_S.mjs";
 
-import { I as IconButton } from "./IconButton-B_W-aOsB.mjs";
+import { I as IconButton } from "./IconButton-nOcdRqR3.mjs";
 
 var css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",

package/dist/esm/chunks/{Tip-CTdrwLky.mjs → Tip-DBVeB0Zs.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -7,7 +7,7 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-2MIIqzsX.mjs";
+import { f as filterClasses } from "./misc-BQH7I5Zj.mjs";
 
 var css = {
     wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",

package/dist/esm/chunks/{Toast-8bUziIgh.mjs → Toast-HU8Pgwsr.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -11,13 +11,19 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-2MIIqzsX.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-BQH7I5Zj.mjs";
+
+import "./webRTCStore-Ck8TCzr_.mjs";
+
+import "./microphoneStore-uYs2NQQx.mjs";
+
+import "./volumeStore-C0iU07fK.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-D4A6_c4x.mjs";
+import { I as Icon } from "./Icon-CbDAKN_S.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-BV0ginXb.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BWrcdWvF.mjs";
 
 var ToastType, css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",

package/dist/esm/chunks/{ToggleButton-BOFITa8_.mjs → ToggleButton-CGpBWhaX.mjs}

@@ -2,14 +2,14 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import { useMemo } from "react";
 
-import { I as IconButton } from "./IconButton-B_W-aOsB.mjs";
+import { I as IconButton } from "./IconButton-nOcdRqR3.mjs";
 
-import { L as Label } from "./Label-I75yz3gq.mjs";
+import { L as Label } from "./Label-BlvreqNJ.mjs";
 
 var css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 function ToggleButton(props) {
-    const {label: label, textSize: textSize, icon: icon, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorOn: bgColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children} = props, handleClick = () => {
+    const {label: label, textSize: textSize, icon: icon, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorOn: bgColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, border: border = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children} = props, handleClick = () => {
         if (!unselect && selected) return;
         const newState = !selected;
         null == onChange || onChange(newState), newState && (null == onSelect || onSelect());
@@ -33,7 +33,8 @@ function ToggleButton(props) {
             iconSize: iconSize,
             iconFill: fill,
             disabled: disabled,
-            onToolTip: onToolTip
+            onToolTip: onToolTip,
+            border: border
         }), (children || label) && jsx(Label, {
             textSize: textSize,
             borderSize: 0,

package/dist/esm/chunks/{UploadArea-DE2ccDVx.mjs → UploadArea-DdV_ILIU.mjs}

@@ -3,13 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-2MIIqzsX.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-BQH7I5Zj.mjs";
 
-import { I as Icon } from "./Icon-D4A6_c4x.mjs";
+import { F as FileList } from "./FileList-CnuT4Llg.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-BV0ginXb.mjs";
+import { I as Icon } from "./Icon-CbDAKN_S.mjs";
 
-import { F as FileList } from "./FileList-vMiGJByw.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BWrcdWvF.mjs";
 
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",

package/dist/esm/chunks/{WSConnection-CHudrD62.mjs → WSConnection-eStD8i-1.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter } from "./tslib.es6-75ZdAmtm.mjs";
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/esm/chunks/{WebRTCConnection-DQbNa7Z9.mjs → WebRTCConnection-BaPHQ_C4.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter } from "./tslib.es6-75ZdAmtm.mjs";
 
 class WebRTCConnection {
     /**

package/dist/esm/chunks/{localDBStore-CaYiqITY.mjs → localDBStore-NpiMrXsA.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter, _ as __rest } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter, _ as __rest } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { useMemo } from "react";
 
@@ -6,7 +6,7 @@ import { create } from "zustand";
 
 import { useShallow } from "zustand/react/shallow";
 
-import { I as IndexedDB } from "./IndexedDB-CTqfKmp1.mjs";
+import { I as IndexedDB } from "./IndexedDB-Bqjric8V.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));

package/dist/esm/chunks/{microphoneStore-COEGtgyX.mjs → microphoneStore-uYs2NQQx.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __awaiter } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter } from "./tslib.es6-75ZdAmtm.mjs";
 
 import { useEffect } from "react";
 

package/dist/esm/chunks/{misc-2MIIqzsX.mjs → misc-BQH7I5Zj.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter } from "./tslib.es6-75ZdAmtm.mjs";
 
 /**
  * Remove scripts, invisible characters, and optional HTML tags from a string.

package/dist/esm/chunks/{sseStore-nW9CMec_.mjs → sseStore-ueYoyFeB.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-C81Qhn1z.mjs";
+import "./tslib.es6-75ZdAmtm.mjs";
 
-import { S as SSEConnection } from "./SSEConnection-iFKOV9Uo.mjs";
+import { S as SSEConnection } from "./SSEConnection-DNA5yBWy.mjs";
 
 const useSSEStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{uploads-worker-CMomtRvm.mjs → uploads-worker-CFPGExfT.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-C81Qhn1z.mjs";
+import { a as __awaiter } from "./tslib.es6-75ZdAmtm.mjs";
 
 var FileUploadStatus, UploadError, WorkerStatus;
 

package/dist/esm/chunks/{uploadsStore-CsfpSOTS.mjs → uploadsStore-DNalSMtC.mjs}

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import { W as WorkerStatus } from "./uploads-worker-CMomtRvm.mjs";
+import { W as WorkerStatus } from "./uploads-worker-CFPGExfT.mjs";
 
 let uploadsWorker = null;