@apple-pie/slice 0.1.51 → 0.1.53

package/dist/cjs/chunks/{Tip-D7gtWmNi.js → Tip-CtobkAG3.js}

@@ -1,12 +1,13 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-LAaHE64b.js"), css = {
+var tslib_es6 = require("./tslib.es6-Y3RzGMQw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-B2oK3rIL.js"), css = {
     wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",
     xs: "Tip-module_xs__wsz9y type-module_body-xs-regular__ZAFft",
     s: "Tip-module_s__Wvz3q type-module_body-s-regular__vRHSP",
     m: "Tip-module_m__9qJbB type-module_body-m-regular__LuQBA",
-    l: "Tip-module_l__OdNuh type-module_body-l-regular__lOYbg"
+    l: "Tip-module_l__OdNuh type-module_body-l-regular__lOYbg",
+    xl: "Tip-module_xl__izmFk type-module_body-xl-regular__pF2kC"
 };
 
 const tipBasePos = {
@@ -14,7 +15,7 @@ const tipBasePos = {
     top: 0
 }, TipBase = React.forwardRef((props, ref) => {
     var _a;
-    const {tip: tip, size: size = "s", backgroundColor: backgroundColor, bgColor: bgColor, textColor: textColor, color: color, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius, radius: radius, coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500} = props, divAttributes = tslib_es6.__rest(props, [ "tip", "size", "backgroundColor", "bgColor", "textColor", "color", "border", "borderColor", "padding", "borderRadius", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = React.useState(tipBasePos), [ready, setReady] = React.useState(!1), [animate, setAnimate] = React.useState(!1), timer = React.useRef(null), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedTextColor = null != textColor ? textColor : color, resolvedBorderRadius = null != borderRadius ? borderRadius : radius;
+    const {tip: tip, textSize: textSize = "s", backgroundColor: backgroundColor, textColor: textColor, color: color, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius, radius: radius, coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500} = props, divAttributes = tslib_es6.__rest(props, [ "tip", "textSize", "backgroundColor", "textColor", "color", "border", "borderColor", "padding", "borderRadius", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = React.useState(tipBasePos), [ready, setReady] = React.useState(!1), [animate, setAnimate] = React.useState(!1), timer = React.useRef(null), resolvedBackgroundColor = backgroundColor, resolvedTextColor = null != textColor ? textColor : color, resolvedBorderRadius = null != borderRadius ? borderRadius : radius;
     React.useEffect(() => {
         timer.current && clearTimeout(timer.current);
         const {x: x, y: y} = null != coords ? coords : {
@@ -44,14 +45,14 @@ const tipBasePos = {
         "--tooltip-background": null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)",
         "--tooltip-color": null != resolvedTextColor ? resolvedTextColor : "var(--core-text-primary)",
         "--tooltip-border": border ? `1px solid ${null != borderColor ? borderColor : "var(--core-outline-primary)"}` : "unset",
-        "--tooltip-border-radius": null != resolvedBorderRadius ? resolvedBorderRadius : "4px"
+        "--tooltip-border-radius": null != resolvedBorderRadius ? resolvedBorderRadius : `${theme_corners.corners["corner-xs"]}px`
     }), [ padding, resolvedBackgroundColor, resolvedTextColor, border, borderColor, resolvedBorderRadius ]), coordStyle = React.useMemo(() => {
         const {left: left, top: top} = pos;
         return {
             left: `${null != left ? left : 0}px`,
             top: `${null != top ? top : 0}px`
         };
-    }, [ pos ]), classNames = React.useMemo(() => misc.filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]);
+    }, [ pos ]), classNames = React.useMemo(() => misc.filterClasses([ css.wrapper, css[textSize], divClass ]), [ textSize, divClass ]);
     return jsxRuntime.jsx(react.motion.div, Object.assign({
         ref: ref,
         id: divId,

package/dist/cjs/chunks/{Toast-D3Hd0AMU.js → Toast-BRvp6HeI.js}

@@ -1,31 +1,33 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.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-Y3RzGMQw.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 misc = require("./misc-LAaHE64b.js");
+var misc = require("./misc-B2oK3rIL.js");
 
-require("./broadcastChannel-Cqzs7sXX.js"), require("./webRTCStore-B-ZZdCuw.js"), 
-require("./microphoneStore-Ds2J_e1I.js"), require("./volumeStore-DbLg_-L9.js"), 
+require("./broadcastChannel-CRR59lw6.js"), require("./webRTCStore-XciamNCa.js"), 
+require("./microphoneStore-axA5TgKM.js"), require("./volumeStore-D64ziNWo.js"), 
 require("../hooks/useWindow.js");
 
-var ToastType, Icon = require("./Icon-NDphOLR6.js"), ProgressIndicator = require("./ProgressIndicator-a4uthp1C.js"), css = {
+var ToastType, Icon = require("./Icon-VcvTUkMA.js"), ProgressIndicator = require("./ProgressIndicator--Ph78ZSe.js"), css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",
     close: "Toast-module_close__i10-s flexBox-module_row__z24tF",
     message: "Toast-module_message__3dP0P flexBox-module_rowStart__4tcxS",
     progress: "Toast-module_progress__SWsbA flexBox-module_row__z24tF",
+    xs: "Toast-module_xs__ptQ-h type-module_body-xs-regular__ZAFft",
     s: "Toast-module_s__kc5Ef type-module_body-s-regular__vRHSP",
     m: "Toast-module_m__JtmLz type-module_body-m-regular__LuQBA",
-    l: "Toast-module_l__-W0PD type-module_body-l-regular__lOYbg"
+    l: "Toast-module_l__-W0PD type-module_body-l-regular__lOYbg",
+    xl: "Toast-module_xl__j5Zhr type-module_body-xl-regular__pF2kC"
 };
 
 exports.ToastType = void 0, (ToastType = exports.ToastType || (exports.ToastType = {})).Success = "success", 
 ToastType.Error = "error", ToastType.Warning = "warning", ToastType.Info = "info";
 
 const ToastBase = React.forwardRef((props, ref) => {
-    const {notifId: notifId, message: message = null, size: size = "m", border: border = !0, padding: padding, radius: radius = 8, container: container = "window", showDelay: showDelay = 0, duration: duration = 5e3, position: position = "bottom", offset: offset = 24, close: close = !0, progress: progress, type: type = exports.ToastType.Info, didHide: didHide = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "notifId", "message", "size", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = hooks_useTheme.useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = React.useState(!1), [content, setContent] = React.useState(null), timer = React.useRef(null);
+    const {notifId: notifId, message: message = null, textSize: textSize = "m", border: border = !0, padding: padding, radius: radius = 8, container: container = "window", showDelay: showDelay = 0, duration: duration = 5e3, position: position = "bottom", offset: offset = 24, close: close = !0, progress: progress, type: type = exports.ToastType.Info, didHide: didHide = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "notifId", "message", "textSize", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = hooks_useTheme.useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = React.useState(!1), [content, setContent] = React.useState(null), timer = React.useRef(null);
     React.useEffect(() => {
         timer.current && clearTimeout(timer.current);
         return message && message.length > 0 ? timer.current = setTimeout(() => {
@@ -101,7 +103,7 @@ const ToastBase = React.forwardRef((props, ref) => {
                 transition: transition
             })
         };
-    }, [ position, offset ]), classNames = React.useMemo(() => misc.filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]), handleClose = React.useCallback(() => {
+    }, [ position, offset ]), classNames = React.useMemo(() => misc.filterClasses([ css.wrapper, css[textSize], divClass ]), [ textSize, divClass ]), handleClose = React.useCallback(() => {
         setReady(!1);
     }, []), handleMouseOver = React.useCallback(() => {
         timer.current && clearTimeout(timer.current);

package/dist/cjs/chunks/{ToggleButton-DnDRKdTq.js → ToggleButton-BGsKt1uz.js}

@@ -1,10 +1,10 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-DFk-yVc6.js"), Label = require("./Label-DkUq49nx.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-Cz7iTVhO.js"), Label = require("./Label-E7350HYG.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 exports.ToggleButton = function(props) {
-    const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "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, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {
+    const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-secondary)", backgroundColorOn: backgroundColorOn = "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, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {
         if (!unselect && selected) return;
         const newState = !selected;
         null == onChange || onChange(newState), newState && (null == onSelect || onSelect());
@@ -20,9 +20,9 @@ exports.ToggleButton = function(props) {
             tooltip: tooltip,
             toggle: !selected,
             isToggled: selected,
-            bgColorOn: bgColorOn,
-            bgColorHover: bgColorHover,
-            bgColor: bgColor,
+            backgroundColorOn: backgroundColorOn,
+            backgroundColorHover: backgroundColorHover,
+            backgroundColor: backgroundColor,
             iconColor: iconColor,
             iconColorOn: iconColorOn,
             iconColorHover: iconColorHover,

package/dist/cjs/chunks/{UploadArea-BHTAfz-P.js → UploadArea-BVIOxAk0.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-LAaHE64b.js"), FileList = require("./FileList-CBGZ8PsW.js"), Icon = require("./Icon-NDphOLR6.js"), ProgressIndicator = require("./ProgressIndicator-a4uthp1C.js"), css = {
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-B2oK3rIL.js"), Icon = require("./Icon-VcvTUkMA.js"), ProgressIndicator = require("./ProgressIndicator--Ph78ZSe.js"), FileList = require("./FileList-NDj9e_To.js"), css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
     icon: "UploadArea-module_icon__M7n-m flexBox-module_row__z24tF",
     title: "UploadArea-module_title__VbNGq type-module_body-l-bold__Fh2dt",
@@ -10,7 +10,8 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc =
     xs: "UploadArea-module_xs__-AoM7 type-module_body-xs-regular__ZAFft",
     s: "UploadArea-module_s__wy1zN type-module_body-s-regular__vRHSP",
     m: "UploadArea-module_m__bKuFN type-module_body-m-regular__LuQBA",
-    l: "UploadArea-module_l__KG9YN type-module_body-l-regular__lOYbg"
+    l: "UploadArea-module_l__KG9YN type-module_body-l-regular__lOYbg",
+    xl: "UploadArea-module_xl__xmTtW type-module_body-xl-regular__pF2kC"
 };
 
 const imageTypes = [ "png", "jpg", "jpeg", "gif", "svg", "heic", "heif" ], videoTypes = [ "mp4", "avi", "mov", "wmv", "flv" ], documentTypes = [ "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" ], audioTypes = [ "mp3", "wav", "ogg", "aac", "flac" ], textTypes = [ "txt", "rtf", "md", "csv", "json", "xml" ], allTypes = [ ...imageTypes, ...videoTypes, ...documentTypes, ...audioTypes, ...textTypes ];
@@ -23,7 +24,7 @@ var FileTypes;
 }(FileTypes || (FileTypes = {}));
 
 const UploadAreaBase = React.forwardRef((props, ref) => {
-    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth, border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius, radius: radius = 8, padding: padding = 32, backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = React.useState(!1), inputRef = React.useRef(null), dragDepth = React.useRef(0), inputId = React.useId(), titleId = React.useId(), messageId = React.useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, handleClickUpload = React.useCallback(() => {
+    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth, border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius, radius: radius = theme_corners.corners["corner-m"], padding: padding = 32, backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = React.useState(!1), inputRef = React.useRef(null), dragDepth = React.useRef(0), inputId = React.useId(), titleId = React.useId(), messageId = React.useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, handleClickUpload = React.useCallback(() => {
         var _a;
         isInteractive && (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
         null === (_a = inputRef.current) || void 0 === _a || _a.click());
@@ -38,10 +39,10 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
         e.preventDefault(), busy || (dragDepth.current = Math.max(0, dragDepth.current - 1), 
         0 === dragDepth.current && setHovered(!1));
     }, [ busy ]), handleDrop = React.useCallback(e => {
-        var _a;
+        var _a, _b;
         if (e.preventDefault(), busy) return;
         dragDepth.current = 0, setHovered(!1);
-        const files = Array.from(null !== (_a = e.dataTransfer.files) && void 0 !== _a ? _a : []);
+        const files = Array.from(null !== (_b = null === (_a = e.dataTransfer) || void 0 === _a ? void 0 : _a.files) && void 0 !== _b ? _b : []);
         null == onUpload || onUpload(files);
     }, [ busy, onUpload ]), iconStrokeColor = React.useMemo(() => hovered ? iconColorHover : iconColor, [ hovered, iconColor, iconColorHover ]), cssVars = React.useMemo(() => ({
         "--ua-border": `${resolvedBorderWidth}px`,
@@ -97,8 +98,8 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
             className: css.files,
             children: jsxRuntime.jsx(FileList.FileList, {
                 files: files,
-                bgColor: "var(--core-surface-primary)",
-                size: "m",
+                backgroundColor: "var(--core-surface-primary)",
+                textSize: "m",
                 direction: "column",
                 gap: 8,
                 iconSize: 24,

package/dist/cjs/chunks/{Video-B7bisMIA.js → Video-B9BWFeiN.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var PlayState, tslib_es6 = require("./tslib.es6-B8RWDz3P.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-LAaHE64b.js"), IconButton = require("./IconButton-DFk-yVc6.js"), Slider = require("./Slider-CLQ0GSie.js"), ToggleButton = require("./ToggleButton-DnDRKdTq.js"), css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
+var PlayState, tslib_es6 = require("./tslib.es6-Y3RzGMQw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-B2oK3rIL.js"), IconButton = require("./IconButton-Cz7iTVhO.js"), Slider = require("./Slider-BfiaN55A.js"), ToggleButton = require("./ToggleButton-BGsKt1uz.js"), css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
 
 !function(PlayState) {
     PlayState.Playing = "playing", PlayState.Paused = "paused", PlayState.Stopped = "stopped", 
@@ -176,8 +176,8 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconFill: !0,
                             buttonSize: "m",
                             iconSize: 18,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             onClick: () => handleFullScreen(!0)
@@ -189,9 +189,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconFill: !0,
                             buttonSize: "m",
                             iconSize: 20,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(0,0,0,0.5)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(0,0,0,0.5)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             onClick: () => handleMute()
@@ -214,9 +214,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                         iconOn: "pause",
                         iconSize: 48,
                         buttonSize: "xl",
-                        bgColor: "rgba(0,0,0,0.5)",
-                        bgColorHover: "rgba(0,0,0,0.7)",
-                        bgColorOn: "rgba(0,0,0,0.5)",
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        backgroundColorHover: "rgba(0,0,0,0.7)",
+                        backgroundColorOn: "rgba(0,0,0,0.5)",
                         iconColor: "var(--core-text-light)",
                         iconColorOn: "var(--core-text-light)",
                         iconColorHover: "var(--core-text-light)",
@@ -232,9 +232,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconOn: "pause",
                             buttonSize: "m",
                             iconSize: 28,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(255,255,255,0.05)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(255,255,255,0.05)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             iconColorOn: "var(--core-text-light)",
@@ -253,9 +253,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             toggle: !1,
                             icon: "x",
                             buttonSize: "m",
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(255,255,255,0.05)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(255,255,255,0.05)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             iconColorOn: "var(--core-text-light)",

package/dist/cjs/chunks/{VideoController-QMAJKhPH.js → VideoController-D5J76aQJ.js}

@@ -1,12 +1,12 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
+var tslib_es6 = require("./tslib.es6-Y3RzGMQw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
 
-require("./microphoneStore-Ds2J_e1I.js"), require("./volumeStore-DbLg_-L9.js"), 
-require("./webRTCStore-B-ZZdCuw.js");
+require("./microphoneStore-axA5TgKM.js"), require("./volumeStore-D64ziNWo.js"), 
+require("./webRTCStore-XciamNCa.js");
 
-var misc = require("./misc-LAaHE64b.js"), IconButton = require("./IconButton-DFk-yVc6.js"), Overlay = require("./Overlay-CxVrTI2z.js"), videoStore = require("./videoStore-COp8iv9F.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
+var theme_corners = require("../theme/corners.js"), misc = require("./misc-B2oK3rIL.js"), IconButton = require("./IconButton-Cz7iTVhO.js"), Overlay = require("./Overlay-B0jNgBu3.js"), videoStore = require("./videoStore-B2FtqVfG.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 
 const defaultTransition = {
     ease: "easeOut",
@@ -26,7 +26,7 @@ const defaultTransition = {
 
 exports.VideoController = function(props) {
     var _a;
-    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", padding: padding = 64, borderRadius: borderRadius = 8, quit: quit = "inline", onQuit: onQuit} = props, controls = react.useDragControls(), video = videoStore.useVideo(), hide = videoStore.useVideoActions().clear, VideoComponent = null == video ? void 0 : video.component, _b = null !== (_a = null == video ? void 0 : video.props) && void 0 !== _a ? _a : {}, {onLoadedFrameData: onLoadedFrameData, borderRadius: videoBorderRadius} = _b, videoProps = tslib_es6.__rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = React.useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = React.useState(!1);
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", padding: padding = 64, borderRadius: borderRadius = theme_corners.corners["corner-m"], quit: quit = "inline", onQuit: onQuit} = props, controls = react.useDragControls(), video = videoStore.useVideo(), hide = videoStore.useVideoActions().clear, VideoComponent = null == video ? void 0 : video.component, _b = null !== (_a = null == video ? void 0 : video.props) && void 0 !== _a ? _a : {}, {onLoadedFrameData: onLoadedFrameData, borderRadius: videoBorderRadius} = _b, videoProps = tslib_es6.__rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = React.useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = React.useState(!1);
     React.useEffect(() => {
         (null == video ? void 0 : video.id) && setReady(!1);
     }, [ null == video ? void 0 : video.id ]);
@@ -35,7 +35,7 @@ exports.VideoController = function(props) {
     }, cssVars = React.useMemo(() => ({
         "--overlay-padding": misc.setStyle(padding, 64),
         "--video-visibility": ready ? "visible" : "hidden",
-        "--video-border-radius": misc.setStyle(borderRadius, 8)
+        "--video-border-radius": misc.setStyle(borderRadius, theme_corners.corners["corner-m"])
     }), [ padding, ready, borderRadius ]);
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsx(Overlay.Overlay, {
@@ -81,8 +81,8 @@ exports.VideoController = function(props) {
                             icon: "x",
                             buttonSize: "l",
                             onClick: handleHide,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(255,255,255,0.25)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(255,255,255,0.25)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)"
                         }) ]

package/dist/cjs/chunks/{WSConnection-BAltqes7.js → WSConnection-BrwlAScO.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.js");
+var tslib_es6 = require("./tslib.es6-Y3RzGMQw.js");
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/cjs/chunks/{WebRTCConnection-dL2SK3_2.js → WebRTCConnection-nx-EhtdY.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.js");
+var tslib_es6 = require("./tslib.es6-Y3RzGMQw.js");
 
 exports.WebRTCConnection = class {
     /**

package/dist/cjs/chunks/{browserChannelsStore-BTPpbDRA.js → browserChannelsStore-C8C4qb7h.js}

@@ -2,9 +2,9 @@
 
 var zustand = require("zustand");
 
-require("./tslib.es6-B8RWDz3P.js");
+require("./tslib.es6-Y3RzGMQw.js");
 
-var broadcastChannel = require("./broadcastChannel-Cqzs7sXX.js");
+var broadcastChannel = require("./broadcastChannel-CRR59lw6.js");
 
 const useBrowserChannelsStore = zustand.create((set, get) => ({
     channels: null,

package/dist/cjs/chunks/{localDBStore-C3NUtnhe.js → localDBStore-DhruyXfz.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-B8RWDz3P.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-CpCbUa22.js");
+var tslib_es6 = require("./tslib.es6-Y3RzGMQw.js"), React = require("react"), zustand = require("zustand"), shallow = require("zustand/react/shallow"), IndexedDB = require("./IndexedDB-D7TVb0pF.js");
 
 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));
@@ -120,7 +120,7 @@ function replaceConnection(connection) {
 
 /**
  * Update connection with an error state
- */ require("./broadcastChannel-Cqzs7sXX.js");
+ */ require("./broadcastChannel-CRR59lw6.js");
 
 const useLocalDBStore = zustand.create((set, get) => ({
     stores: [],