@apple-pie/slice 0.1.51 → 0.1.53

package/dist/esm/chunks/{Toast-BL0jO3nb.mjs → Toast-DNN0M8ds.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -13,30 +13,32 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CGbLu2wM.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CNTW0t8s.mjs";
 
 var ToastType, 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"
 };
 
 !function(ToastType) {
@@ -45,7 +47,7 @@ var ToastType, css = {
 }(ToastType || (ToastType = {}));
 
 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 = ToastType.Info, didHide: didHide = () => null} = props, divAttributes = __rest(props, [ "notifId", "message", "size", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = useState(!1), [content, setContent] = useState(null), timer = 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 = ToastType.Info, didHide: didHide = () => null} = props, divAttributes = __rest(props, [ "notifId", "message", "textSize", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = useState(!1), [content, setContent] = useState(null), timer = useRef(null);
     useEffect(() => {
         timer.current && clearTimeout(timer.current);
         return message && message.length > 0 ? timer.current = setTimeout(() => {
@@ -121,7 +123,7 @@ const ToastBase = React.forwardRef((props, ref) => {
                 transition: transition
             })
         };
-    }, [ position, offset ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]), handleClose = useCallback(() => {
+    }, [ position, offset ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[textSize], divClass ]), [ textSize, divClass ]), handleClose = useCallback(() => {
         setReady(!1);
     }, []), handleMouseOver = useCallback(() => {
         timer.current && clearTimeout(timer.current);

package/dist/esm/chunks/{ToggleButton-dZPHYzZH.mjs → ToggleButton-BhRGIiQz.mjs}

@@ -3,14 +3,14 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import { useMemo } from "react";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
-import { L as Label } from "./Label-Etcumudw.mjs";
+import { L as Label } from "./Label-CFUlmEKM.mjs";
 
 var css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 function ToggleButton(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());
@@ -26,9 +26,9 @@ function ToggleButton(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/esm/chunks/{UploadArea-voCl4jpT.mjs → UploadArea-BFEjUf7n.mjs}

@@ -3,13 +3,15 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { F as FileList } from "./FileList-Dt5V9YPs.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-O5ZSVDP0.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CGbLu2wM.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-CNTW0t8s.mjs";
+
+import { F as FileList } from "./FileList-CK96tECm.mjs";
 
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
@@ -20,7 +22,8 @@ var css = {
     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 ];
@@ -33,7 +36,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] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), inputId = useId(), titleId = useId(), messageId = 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 = 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 = 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] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), inputId = useId(), titleId = useId(), messageId = useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, handleClickUpload = useCallback(() => {
         var _a;
         isInteractive && (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
         null === (_a = inputRef.current) || void 0 === _a || _a.click());
@@ -48,10 +51,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 = 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 = useMemo(() => hovered ? iconColorHover : iconColor, [ hovered, iconColor, iconColorHover ]), cssVars = useMemo(() => ({
         "--ua-border": `${resolvedBorderWidth}px`,
@@ -107,8 +110,8 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
             className: css.files,
             children: jsx(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/esm/chunks/{Video-CRBP0r2b.mjs → Video-DBF6un3N.mjs}

@@ -1,17 +1,17 @@
 'use client';
-import { a as __rest, _ as __awaiter } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest, _ as __awaiter } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
-import { S as Slider } from "./Slider-BJ9mifdr.mjs";
+import { S as Slider } from "./Slider-BzX_jQ27.mjs";
 
-import { T as ToggleButton } from "./ToggleButton-dZPHYzZH.mjs";
+import { T as ToggleButton } from "./ToggleButton-BhRGIiQz.mjs";
 
 var PlayState, 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";
 
@@ -187,8 +187,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)
@@ -200,9 +200,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()
@@ -225,9 +225,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)",
@@ -243,9 +243,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)",
@@ -264,9 +264,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/esm/chunks/{VideoController-kYO0CqYG.mjs → VideoController-lNXxiYAp.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -7,19 +7,21 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef, useState, useEffect, useMemo } from "react";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { O as Overlay } from "./Overlay-CZxlviV2.mjs";
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
-import { u as useVideo, a as useVideoActions } from "./videoStore-Z2NndKsG.mjs";
+import { O as Overlay } from "./Overlay-CYvVXNU5.mjs";
+
+import { u as useVideo, a as useVideoActions } from "./videoStore-TxVsMj8s.mjs";
 
 var css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 
@@ -41,7 +43,7 @@ const defaultTransition = {
 
 function VideoController(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 = useDragControls(), video = useVideo(), hide = 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 = __rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = 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 = corners["corner-m"], quit: quit = "inline", onQuit: onQuit} = props, controls = useDragControls(), video = useVideo(), hide = 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 = __rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = useState(!1);
     useEffect(() => {
         (null == video ? void 0 : video.id) && setReady(!1);
     }, [ null == video ? void 0 : video.id ]);
@@ -50,7 +52,7 @@ function VideoController(props) {
     }, cssVars = useMemo(() => ({
         "--overlay-padding": setStyle(padding, 64),
         "--video-visibility": ready ? "visible" : "hidden",
-        "--video-border-radius": setStyle(borderRadius, 8)
+        "--video-border-radius": setStyle(borderRadius, corners["corner-m"])
     }), [ padding, ready, borderRadius ]);
     return jsxs(Fragment, {
         children: [ jsx(Overlay, {
@@ -96,8 +98,8 @@ function VideoController(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/esm/chunks/{WSConnection-e7-nSYVD.mjs → WSConnection-Bd3_THiB.mjs}

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

package/dist/esm/chunks/{WebRTCConnection-DtIhWGrY.mjs → WebRTCConnection-DvF2ENaH.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-p9eD9VLE.mjs";
+import { _ as __awaiter } from "./tslib.es6-uJhEruZV.mjs";
 
 class WebRTCConnection {
     /**

package/dist/esm/chunks/{browserChannelsStore-DGDANcLP.mjs → browserChannelsStore-Dkg2yF-s.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-p9eD9VLE.mjs";
+import "./tslib.es6-uJhEruZV.mjs";
 
-import { B as BrowserChannel } from "./broadcastChannel-Bw5Pck80.mjs";
+import { B as BrowserChannel } from "./broadcastChannel-B8FxWRVj.mjs";
 
 const useBrowserChannelsStore = create((set, get) => ({
     channels: null,

package/dist/esm/chunks/{localDBStore-DwusxhIq.mjs → localDBStore-DmM1xv6W.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter, a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { _ as __awaiter, a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { useMemo } from "react";
 
@@ -6,9 +6,9 @@ import { create } from "zustand";
 
 import { useShallow } from "zustand/react/shallow";
 
-import { I as IndexedDB } from "./IndexedDB-BvJLLZU8.mjs";
+import { I as IndexedDB } from "./IndexedDB-DNFNyOit.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));