@apple-pie/slice 0.1.52 → 0.1.54

package/dist/cjs/chunks/{AudioBubble-Di2Qyjer.js → AudioBubble-Dr6qLxhJ.js}

@@ -1,14 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var colors = require("./colors-jx2QRRls.js"), audioVisualizer = require("./audioVisualizer-DFgLMDKW.js");
+var colors = require("./colors-C2uwoGzp.js"), audioVisualizer = require("./audioVisualizer-GmZ0xNzv.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js");
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js");
 
 var css_wrapper = "AudioBubble-module_wrapper__f2yKg flexBox-module_row__z24tF", css_bubble = "AudioBubble-module_bubble__bpPT3 flexBox-module_row__z24tF";
 

package/dist/cjs/chunks/{Avatar-L6s2-x0u.js → Avatar-Dm6-L043.js}

@@ -1,11 +1,11 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
 
 const Avatar = React.memo(props => {
     var _a;
-    const {email: email, name: name, image: image = "", textColor: textColor, borderWidth: borderWidth, borderSize: borderSize = 0, color: color, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize, outerBorderColor: outerBorderColor, backgroundColor: backgroundColor, bgColor: bgColor, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "email", "name", "image", "textColor", "borderWidth", "borderSize", "color", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "backgroundColor", "bgColor", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [textSize, setTextSize] = React.useState("inherit"), resolvedTextColor = null != textColor ? textColor : color, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, initials = React.useMemo(() => {
+    const {email: email, name: name, image: image = "", textColor: textColor, borderWidth: borderWidth, borderSize: borderSize = 0, color: color, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize, outerBorderColor: outerBorderColor, backgroundColor: backgroundColor, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "email", "name", "image", "textColor", "borderWidth", "borderSize", "color", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "backgroundColor", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [textSize, setTextSize] = React.useState("inherit"), resolvedTextColor = null != textColor ? textColor : color, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = backgroundColor, initials = React.useMemo(() => {
         if (!name && !email) return "";
         if (name) {
             let last;

package/dist/cjs/chunks/{AvatarGroup-DNGFPl1j.js → AvatarGroup-COzT3ILz.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-L6s2-x0u.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-Dm6-L043.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
 
 const AvatarGroup = React.memo(props => {
     const {avatars: avatars = [], size: size = 32, borderWidth: borderWidth, borderSize: borderSize = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "borderWidth", "borderSize", "overlap", "gap", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, cssVars = React.useMemo(() => ({
@@ -9,7 +9,7 @@ const AvatarGroup = React.memo(props => {
         "--ag-margin": `${null != margin ? margin : 0}px`,
         "--ag-overlap": (overlap > 0 ? -overlap : 0) + "px"
     }), [ overlap, gap, margin ]), renderedAvatars = React.useMemo(() => avatars ? avatars.map((avatar, index) => {
-        var _a, _b;
+        var _a;
         return jsxRuntime.jsx("div", {
             className: css_avatar,
             children: jsxRuntime.jsx(Avatar.Avatar, {
@@ -24,7 +24,7 @@ const AvatarGroup = React.memo(props => {
                 outerBorderSize: outerBorderSize,
                 outerBorderColor: outerBorderColor,
                 textColor: null !== (_a = avatar.textColor) && void 0 !== _a ? _a : avatar.color,
-                backgroundColor: null !== (_b = avatar.backgroundColor) && void 0 !== _b ? _b : avatar.bgColor,
+                backgroundColor: avatar.backgroundColor,
                 onToolTip: onToolTip
             })
         }, `avatar_${avatar.email}_${index}`);

package/dist/cjs/chunks/{Badge-CWASZI0E.js → Badge--0CfhLFo.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
 
 const Badge = React.memo(props => {
     const {count: count, variant: variant = "dark", hideNull: hideNull = !0} = props, divAttributes = tslib_es6.__rest(props, [ "count", "variant", "hideNull" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", displayCount = React.useMemo(() => void 0 === count ? "0" : "string" == typeof count ? count : count > 99 ? "99+" : count.toString(), [ count ]), cssVars = React.useMemo(() => ({

package/dist/cjs/chunks/{Button-kzWt5lcL.js → Button-GKTXo4mq.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-CWASZI0E.js"), Dot = require("./Dot-ByKZIcva.js"), Icon = require("./Icon-CUbgmUeu.js"), ProgressIndicator = require("./ProgressIndicator-Bi1UfJIW.js"), sharedTypes = require("./sharedTypes-BT25wBhL.js"), css = {
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), theme_corners = require("../theme/corners.js"), Badge = require("./Badge--0CfhLFo.js"), Dot = require("./Dot-C_3SC1bM.js"), Icon = require("./Icon-CsNB8HJ4.js"), ProgressIndicator = require("./ProgressIndicator-CctdHXiJ.js"), sharedTypes = require("./sharedTypes-BgBhX0El.js"), css = {
     button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
     label: "Button-module_label__UJ3Zt",
     count: "Button-module_count__DFxVB flexBox-module_row__z24tF",
@@ -14,7 +14,7 @@ var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/
 };
 
 const ButtonComponent = React.forwardRef((props, buttonRef) => {
-    const {children: children, size: size = "medium", variant: variant = "outline", label: label, labelSize: labelSize = "m", iconRight: iconRight, iconLeft: iconLeft, iconFill: iconFill = !1, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, iconColor: iconColor, backgroundColor: backgroundColor, backgroundColorDisabled: backgroundColorDisabled, bgColor: bgColor, bgColorDisabled: bgColorDisabled, labelColor: labelColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, link: link, target: target = "_self", onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "children", "size", "variant", "label", "labelSize", "iconRight", "iconLeft", "iconFill", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "backgroundColor", "backgroundColorDisabled", "bgColor", "bgColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "link", "target", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorDisabled = null != backgroundColorDisabled ? backgroundColorDisabled : bgColorDisabled, [btnState, setBtnState] = React.useState(state), [lockedWidth, setLockedWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), lockCurrentWidth = React.useCallback(() => {
+    const {children: children, size: size = "medium", variant: variant = "outline", label: label, labelSize: labelSize = "m", iconRight: iconRight, iconLeft: iconLeft, iconFill: iconFill = !1, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, iconColor: iconColor, backgroundColor: backgroundColor, backgroundColorDisabled: backgroundColorDisabled, labelColor: labelColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, link: link, target: target = "_self", onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "children", "size", "variant", "label", "labelSize", "iconRight", "iconLeft", "iconFill", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "backgroundColor", "backgroundColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "link", "target", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorDisabled = backgroundColorDisabled, [btnState, setBtnState] = React.useState(state), [lockedWidth, setLockedWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), lockCurrentWidth = React.useCallback(() => {
         ref.current && setLockedWidth(ref.current.offsetWidth);
     }, []), handleClick = React.useCallback(e => {
         onToolTip(null), "disabled" !== btnState && (progress && duration ? (lockCurrentWidth(), 
@@ -118,7 +118,7 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             paddingRight: setPadding("right"),
             paddingTop: 0,
             paddingBottom: 0,
-            borderRadius: null != borderRadius ? borderRadius : "500px"
+            borderRadius: null != borderRadius ? borderRadius : theme_corners.corners["corner-round"]
         },
         medium: {
             height: 36,
@@ -128,7 +128,7 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             paddingRight: setPadding("right"),
             paddingTop: 0,
             paddingBottom: 0,
-            borderRadius: null != borderRadius ? borderRadius : "500px"
+            borderRadius: null != borderRadius ? borderRadius : theme_corners.corners["corner-round"]
         },
         small: {
             height: "auto",
@@ -138,7 +138,7 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             paddingRight: setPadding("right"),
             paddingTop: 4,
             paddingBottom: 4,
-            borderRadius: null != borderRadius ? borderRadius : "500px"
+            borderRadius: null != borderRadius ? borderRadius : theme_corners.corners["corner-round"]
         }
     }), [ iconSize, borderRadius, setPadding ]), handleMouseEnter = React.useCallback(e => {
         if ("disabled" !== btnState && setBtnState("hover"), !(null == ref ? void 0 : ref.current) || !tooltip) return;

package/dist/cjs/chunks/{ButtonBar-BaFGN5AR.js → ButtonBar-DTx0V5jh.js}

@@ -1,10 +1,10 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), Icon = require("./Icon-CUbgmUeu.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), theme_corners = require("../theme/corners.js"), Icon = require("./Icon-CsNB8HJ4.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
 
 const ButtonBar = React.memo(function(props) {
-    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = "m", frameSize: frameSize = 36, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 0, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, backgroundColorActive: backgroundColorActive, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorActive: bgColorActive = "var(--core-outline-primary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selected", "toggle", "buttonSize", "frameSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBackgroundColorActive = null != backgroundColorActive ? backgroundColorActive : bgColorActive, [hovered, setHovered] = React.useState(-1), [selectedIndex, setSelectedIndex] = React.useState(selected);
+    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = "m", frameSize: frameSize = 36, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 0, borderRadius: borderRadius = theme_corners.corners["corner-round"], borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-outline-primary)", backgroundColorActive: backgroundColorActive = "var(--core-outline-primary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selected", "toggle", "buttonSize", "frameSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, resolvedBackgroundColorActive = backgroundColorActive, [hovered, setHovered] = React.useState(-1), [selectedIndex, setSelectedIndex] = React.useState(selected);
     React.useEffect(() => setSelectedIndex(selected), [ selected ]);
     const handleMouseEnter = React.useCallback(index => {
         setHovered(index);

package/dist/cjs/chunks/{Camera-CBZmVUf6.js → Camera-D-JFUCUD.js}

@@ -1,16 +1,17 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var misc = require("./misc-BNlFh_4N.js"), colors = require("./colors-jx2QRRls.js");
+var misc = require("./misc-BPL5e5rQ.js"), colors = require("./colors-C2uwoGzp.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js");
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js");
 
-var Avatar = require("./Avatar-L6s2-x0u.js"), Icon = require("./Icon-CUbgmUeu.js"), css_wrapper = "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq", css_video = "Camera-module_video__Q2r9B", css_controls = "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi", css_controlsRight = "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm", css_controlsCenter = "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF", css_controlsLeft = "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS", css_error = "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_poster = "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_snapshotFrame = "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF", css_clear = "Camera-module_clear__aaCfT", css_snapshot = "Camera-module_snapshot__odQH0", css_toolbarButton = "Camera-module_toolbarButton__mnmoF flexBox-module_columnStartCenter__PKcrG", css_buttonIcon = "Camera-module_buttonIcon__a-VBR flexBox-module_row__z24tF", css_buttonLabel = "Camera-module_buttonLabel__6BEs1 flexBox-module_row__z24tF type-module_body-xs-regular__ZAFft";
+var Avatar = require("./Avatar-Dm6-L043.js"), Icon = require("./Icon-CsNB8HJ4.js"), css_wrapper = "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq", css_video = "Camera-module_video__Q2r9B", css_controls = "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi", css_controlsRight = "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm", css_controlsCenter = "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF", css_controlsLeft = "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS", css_error = "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_poster = "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_snapshotFrame = "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF", css_clear = "Camera-module_clear__aaCfT", css_snapshot = "Camera-module_snapshot__odQH0", css_toolbarButton = "Camera-module_toolbarButton__mnmoF flexBox-module_columnStartCenter__PKcrG", css_buttonIcon = "Camera-module_buttonIcon__a-VBR flexBox-module_row__z24tF", css_buttonLabel = "Camera-module_buttonLabel__6BEs1 flexBox-module_row__z24tF type-module_body-xs-regular__ZAFft";
 
 const Camera = React.memo(React.forwardRef((props, ref) => {
     const videoElement = React.useRef(null), containerElement = React.useRef(null), controlsTimer = React.useRef(null), {noVideoPoster: noVideoPoster, width: width, height: height, showControlBar: showControlBar = !0, autoHideControlBar: autoHideControlBar = !0, startCameraOff: startCameraOff = !1, startAudioMuted: startAudioMuted = !1, playLocalAudio: playLocalAudio = !1, pipSnapshot: pipSnapshot = !0, userProfile: userProfile, sessionSettings: sessionSettings, onChangeProfile: onChangeProfile, onChangeSettings: onChangeSettings, onSnapshot: onSnapshot, onVideoStream: onVideoStream, onNoVideo: onNoVideo, onNoAudio: onNoAudio} = props, theme = hooks_useTheme.useTheme(), [cameraSupport, setCameraSupport] = React.useState(void 0), [cameraError, setCameraError] = React.useState(void 0), [hovered, setHovered] = React.useState(!1), [cameraOn, setCameraOn] = React.useState(!1), [micMuted, setMicMuted] = React.useState(startAudioMuted), [snapshot, setSnapshot] = React.useState(void 0), [settings, setSettings] = React.useState(!1), [profile, setProfile] = React.useState(!1), [deviceList, setDeviceList] = React.useState([]), constraints = React.useMemo(() => {
@@ -270,7 +271,7 @@ const Camera = React.memo(React.forwardRef((props, ref) => {
                 controlsTimer.current = setTimeout(() => setHovered(!1), 3e3);
             },
             onClick: handleControlsClick,
-            onKeyDown: e => misc.accessibleKeyDown(e, () => handleControlsClick),
+            onKeyDown: e => misc.accessibleKeyDown(e, () => handleControlsClick(e)),
             children: [ jsxRuntime.jsx("div", {
                 className: css_controlsLeft,
                 children: jsxRuntime.jsx(ToolbarButton, {

package/dist/cjs/chunks/{CheckBox-D8e57FqA.js → CheckBox-C15tG2Bk.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), Icon = require("./Icon-CUbgmUeu.js"), css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), Icon = require("./Icon-CsNB8HJ4.js"), css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
 
 const CheckBox = React.memo(props => {
     const {size: size = 20, checked: checked = !1, disabled: disabled = !1, color: color, children: children, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "checked", "disabled", "color", "children", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [state, setState] = React.useState(checked);

package/dist/cjs/chunks/{Chip-DCFtFPpu.js → Chip-Ew-cd6K_.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), Icon = require("./Icon-CUbgmUeu.js"), sharedTypes = require("./sharedTypes-BT25wBhL.js"), css = {
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), theme_corners = require("../theme/corners.js"), Icon = require("./Icon-CsNB8HJ4.js"), sharedTypes = require("./sharedTypes-BgBhX0El.js"), css = {
     chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
     icon: "Chip-module_icon__dtR-K flexBox-module_row__z24tF",
     xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",
@@ -12,7 +12,7 @@ var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/
 };
 
 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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = React.useState(!1), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = React.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 = theme_corners.corners["corner-m"], paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = React.useState(!1), resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = React.useCallback(e => {
         disabled || onClick(e);
     }, [ disabled, onClick ]), handleMouseEnter = React.useCallback((enter, event) => {
         if (enter) {

package/dist/cjs/chunks/{DivInput-BbYo5dnn.js → DivInput-D9tdT7eI.js}

@@ -1,10 +1,10 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), theme_corners = require("../theme/corners.js"), 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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), innerText = React.useRef("" === value ? misc.cleanString(placeholder) : misc.cleanString(value)), [isFocused, setIsFocused] = React.useState(focus), [text, setText] = React.useState(innerText.current), [isPlaceholder, setIsPlaceholder] = React.useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, setCursor = React.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 = theme_corners.corners["corner-xs"], backgroundColor: backgroundColor = "var(--core-surface-secondary)"} = props, divAttributes = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), value = null != valueProp ? valueProp : "", innerText = React.useRef("" === value ? misc.cleanString(placeholder) : misc.cleanString(value)), [isFocused, setIsFocused] = React.useState(focus), [text, setText] = React.useState(innerText.current), [isPlaceholder, setIsPlaceholder] = React.useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, setCursor = React.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);
@@ -70,10 +70,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 jsxRuntime.jsx("div", Object.assign({
         id: divId,
         className: `${css_wrapper}${divClass}`,
@@ -93,7 +93,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/cjs/chunks/{Dot-ByKZIcva.js → Dot-C_3SC1bM.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
 
 const DEFAULT_VARIANTS = {
     initial: {

package/dist/cjs/chunks/{DrggablePanel-EvnMMRh0.js → DrggablePanel-BJHDIkhE.js}

@@ -1,14 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var misc = require("./misc-BNlFh_4N.js");
+var misc = require("./misc-BPL5e5rQ.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js");
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js");
 
 var hooks_useObserveResize = require("../hooks/useObserveResize.js"), css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8";
 
@@ -36,10 +37,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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = React.useRef(null), div = React.useRef(null), [isDragging, setIsDragging] = React.useState(!1), isOver = React.useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = hooks_useObserveResize.useObserveResize(containerRef), panelSize = hooks_useObserveResize.useObserveResize(div), [handleHighlight, setHandleHighlight] = React.useState(!1), [lastWidth, setLastWidth] = React.useState(null), [panelClosed, setPanelClosed] = React.useState(isClosed), [constraints, setConstraints] = React.useState(() => resolveConstraints(sizeConstraints)), [contWidth, setContWidth] = React.useState((null == containerRef ? void 0 : containerRef.current) ? containerRef.current.offsetWidth : void 0 !== globalThis.window ? window.innerWidth : void 0), [mounted, setMounted] = React.useState(!1), timer = React.useRef(null), closed = panelSize.width <= 1, startX = React.useRef(0), startWidth = React.useRef(0), divWidth = React.useRef(0), divHeight = React.useRef(0), deltaWidth = React.useRef(0);
+    }, transitionDurationOnInit: transitionDurationOnInit, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = React.useRef(null), div = React.useRef(null), [isDragging, setIsDragging] = React.useState(!1), isOver = React.useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = hooks_useObserveResize.useObserveResize(containerRef), panelSize = hooks_useObserveResize.useObserveResize(div), [handleHighlight, setHandleHighlight] = React.useState(!1), [lastWidth, setLastWidth] = React.useState(null), [panelClosed, setPanelClosed] = React.useState(isClosed), [constraints, setConstraints] = React.useState(() => resolveConstraints(sizeConstraints)), [contWidth, setContWidth] = React.useState((null == containerRef ? void 0 : containerRef.current) ? containerRef.current.offsetWidth : void 0 !== globalThis.window ? window.innerWidth : void 0), [mounted, setMounted] = React.useState(!1), timer = React.useRef(null), closed = panelSize.width <= 1, startX = React.useRef(0), startWidth = React.useRef(0), divWidth = React.useRef(0), divHeight = React.useRef(0), deltaWidth = React.useRef(0);
     const handleWindowResize = React.useCallback(() => {
         (null == containerRef ? void 0 : containerRef.current) || setContWidth(window.innerWidth);
     }, [ containerRef ]), handleMouseOver = React.useCallback(() => {
@@ -75,13 +76,7 @@ const DraggablePanel = React.memo(props => {
         timer.current && clearTimeout(timer.current), state ? timer.current = setTimeout(() => {
             setHandleHighlight(state);
         }, isTouchDevice ? 0 : 350) : setHandleHighlight(!1);
-    }, [ isTouchDevice ]), getClientX = React.useCallback(e => misc.pointerPosition(e), []), getNewWidth = React.useCallback(clientX => "right" === drags ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ drags ]), canDrag = React.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 = React.useCallback(e => {
+    }, [ isTouchDevice ]), getClientX = React.useCallback(e => misc.pointerPosition(e), []), getNewWidth = React.useCallback(clientX => "right" === drags ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ drags ]), canDrag = React.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 = React.useCallback(e => {
         if (null == div ? void 0 : div.current) {
             e.stopPropagation(), e.preventDefault();
             const el = div.current, clientX = getClientX(e), newWidth = getNewWidth(clientX);
@@ -111,7 +106,16 @@ const DraggablePanel = React.memo(props => {
             onResize(update), onResizeEnd(update);
         }
         setLastWidth(divWidth.current), isOver.current || setHighlight(!1);
-    }, [ doDrag, onResizeEnd, onResize, setHighlight ]), transition = React.useMemo(() => "width var(--motion-water-duration) var(--motion-water)", []), initDrag = React.useCallback(e => {
+    }, [ doDrag, onResizeEnd, onResize, setHighlight ]), [initialOpenSettled, setInitialOpenSettled] = React.useState(!1);
+    React.useEffect(() => {
+        mounted && setInitialOpenSettled(!0);
+    }, [ mounted ]);
+    const transition = React.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 = React.useCallback(e => {
         if ((null == div ? void 0 : div.current) && document.defaultView) {
             setIsDragging(!0);
             const el = div.current;
@@ -142,8 +146,8 @@ const DraggablePanel = React.memo(props => {
     } : {
         left: isTouchDevice ? -22 : -(gripper.width || 10) / 2
     }, [ drags, isTouchDevice, gripper.width ]), normalizeWidth = React.useCallback(width => mounted ? "number" == typeof width ? width <= 1 && width >= 0 ? contWidth ? contWidth * width + "px" : 0 : `${width}px` : width : "0px", [ contWidth, mounted ]), width = React.useMemo(() => drags ? panelClosed ? 0 : lastWidth || normalizeWidth(constraints.initial) : "100%", [ drags, panelClosed, lastWidth, constraints.initial, normalizeWidth ]), cssVars = React.useMemo(() => ({
-        "--panel-bg": null != bgColor ? bgColor : "transparent"
-    }), [ bgColor ]);
+        "--panel-bg": null != backgroundColor ? backgroundColor : "transparent"
+    }), [ backgroundColor ]);
     return jsxRuntime.jsxs("div", Object.assign({
         id: divId,
         className: `${css_panel}${divClass}`,
@@ -151,6 +155,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/cjs/chunks/{DropDown-C-i2rIhH.js → DropDown-CAOUZGB0.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), Icon = require("./Icon-CUbgmUeu.js"), css = {
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), theme_corners = require("../theme/corners.js"), Icon = require("./Icon-CsNB8HJ4.js"), css = {
     wrapper: "DropDown-module_wrapper__CyX0u flexBox-module_rowStart__4tcxS",
     face: "DropDown-module_face__6gyF3 flexBox-module_rowStart__4tcxS",
     faceText: "DropDown-module_faceText__glhB3",
@@ -20,7 +20,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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = React.useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = React.useState("Select an option"), ref = React.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 = theme_corners.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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = React.useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = React.useState("Select an option"), ref = React.useRef(null);
     React.useEffect(() => {
         if (null == selectedValue && void 0 !== selectedIndex && (null == ref ? void 0 : ref.current)) {
             if (!(null == options ? void 0 : options[selectedIndex])) return;

package/dist/cjs/chunks/{ErrorSummary-DLaE1duh.js → ErrorSummary-O4j5yVBP.js}

@@ -1,14 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var colors = require("./colors-jx2QRRls.js");
+var colors = require("./colors-C2uwoGzp.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js");
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js");
 
 var css = {
     errorBox: "ErrorSummary-module_errorBox__hjY50 flexBox-module_columnStart__C7P44",
@@ -24,7 +25,7 @@ var css = {
 };
 
 const ErrorSummary = React.memo(props => {
-    const {current: current} = hooks_useTheme.useTheme(), warning = current.colors["feedback-warning"], bg = colors.addOpacity(warning, .1), {entries: entries, textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor, bgColor: bgColor = bg, autoNumber: autoNumber = !0} = props, divAttributes = tslib_es6.__rest(props, [ "entries", "textSize", "textColor", "backgroundColor", "bgColor", "autoNumber" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, variants = React.useMemo(() => ({
+    const {current: current} = hooks_useTheme.useTheme(), warning = current.colors["feedback-warning"], bg = colors.addOpacity(warning, .1), {entries: entries, textSize: textSize = "m", textColor: textColor = warning, backgroundColor: backgroundColor = bg, autoNumber: autoNumber = !0} = props, divAttributes = tslib_es6.__rest(props, [ "entries", "textSize", "textColor", "backgroundColor", "autoNumber" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, variants = React.useMemo(() => ({
         enter: {
             opacity: 0,
             maxHeight: 0

package/dist/cjs/chunks/{FileIcon-DqFMbhRF.js → FileIcon-CzZLisJx.js}

@@ -1,15 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var FileIconNames, misc = require("./misc-BNlFh_4N.js");
+var FileIconNames, misc = require("./misc-BPL5e5rQ.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js"), exports.FileIconNames = void 0, 
-(FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js"), exports.FileIconNames = void 0, (FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
 FileIconNames.text = "text", FileIconNames.sheet = "sheet", FileIconNames.preso = "preso", 
 FileIconNames.md = "md", FileIconNames.code = "code", FileIconNames.image = "image", 
 FileIconNames.audio = "audio", FileIconNames.video = "video", FileIconNames.other = "other";

package/dist/cjs/chunks/{FileList-C3KR7jHj.js → FileList-Be7Sn-bF.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BNlFh_4N.js"), FileIcon = require("./FileIcon-DqFMbhRF.js"), Icon = require("./Icon-CUbgmUeu.js"), ProgressIndicator = require("./ProgressIndicator-Bi1UfJIW.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BPL5e5rQ.js"), FileIcon = require("./FileIcon-CzZLisJx.js"), Icon = require("./Icon-CsNB8HJ4.js"), ProgressIndicator = require("./ProgressIndicator-CctdHXiJ.js");
 
 var css = {
     wrapper: "FileList-module_wrapper__9-rrl flexBox-module_rowStart__4tcxS",
@@ -34,7 +34,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 = tslib_es6.__rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "bgColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, fileNameToFileItem = React.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 = tslib_es6.__rest(props, [ "files", "onChange", "onToolTip", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "canRemove" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, fileNameToFileItem = React.useCallback(fileName => {
         const {ext: ext, name: name} = 
         /**
  * Split a file name into its display name and extension.

package/dist/cjs/chunks/{FlexDiv-BPmDJlQe.js → FlexDiv-D7PuHhZt.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var Size, Preset, tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA scrollBars-module_scrollbars__c-ZPl";
+var Size, Preset, tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA scrollBars-module_scrollbars__c-ZPl";
 
 exports.Size = void 0, (Size = exports.Size || (exports.Size = {})).Grow = "grow", 
 Size.Fill = "fill", Size.Fit = "fit", Size.Viewport = "viewport", Size.Auto = "auto", 

package/dist/cjs/chunks/{Grouper-Bm013ATj.js → Grouper-BFDVqFxW.js}

@@ -1,13 +1,13 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("../theme/type.js"), require("./broadcastChannel-B0l8OE4I.js"), 
-require("./microphoneStore-Ch3VVm4T.js"), require("./volumeStore-CA9Pdx5e.js"), 
-require("../hooks/useWindow.js");
+require("../theme/colors.js"), require("../theme/type.js"), require("./broadcastChannel-CtwRunj4.js"), 
+require("./webRTCStore-w3zT4ZiO.js"), require("./microphoneStore-Dn91izLl.js"), 
+require("./volumeStore-DsHPJx-8.js"), require("../hooks/useWindow.js");
 
-var Badge = require("./Badge-CWASZI0E.js"), Icon = require("./Icon-CUbgmUeu.js"), 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";
+var Badge = require("./Badge--0CfhLFo.js"), Icon = require("./Icon-CsNB8HJ4.js"), 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";
 
 const Grouper = React.memo(props => {
     const theme = hooks_useTheme.useTheme(), {title: title = "Group Title", toggle: toggle = !0, open: open = !0, hasIcon: hasIcon = !0, iconName: iconName = "chevron down", iconSize: iconSize = 18, frameSize: frameSize = 64, border: border = 0, count: count = 0, unframed: unframed = !1, hideNull: hideNull = !0, showFilterBadge: showFilterBadge = !1, onChange: onChange = () => null, onClick: onClick = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "title", "toggle", "open", "hasIcon", "iconName", "iconSize", "frameSize", "border", "count", "unframed", "hideNull", "showFilterBadge", "onChange", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [state, setState] = React.useState(open), [icon, animateIcon] = react.useAnimate();

package/dist/cjs/chunks/{Icon-CUbgmUeu.js → Icon-CsNB8HJ4.js}

@@ -1,14 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CTGrDO27.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CG8Jpxry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var misc = require("./misc-BNlFh_4N.js");
+var misc = require("./misc-BPL5e5rQ.js");
 
-require("./broadcastChannel-B0l8OE4I.js"), require("./microphoneStore-Ch3VVm4T.js"), 
-require("./volumeStore-CA9Pdx5e.js"), require("../hooks/useWindow.js");
+require("./broadcastChannel-CtwRunj4.js"), require("./webRTCStore-w3zT4ZiO.js"), 
+require("./microphoneStore-Dn91izLl.js"), require("./volumeStore-DsHPJx-8.js"), 
+require("../hooks/useWindow.js");
 
 var css_icon = "Icon-module_icon__szG-X";