@apple-pie/slice 0.1.56 → 0.1.58

package/dist/esm/chunks/{TextField-C0V-4Lg1.mjs → TextField-BtrrxNNH.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest } from "./tslib.es6-CV__4jU7.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -15,23 +15,23 @@ import { corners } from "../theme/corners.mjs";
 
 import "../theme/type.mjs";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
-import "./webRTCStore-0Fv3Wnrg.mjs";
+import "./webRTCStore-BmyEouBv.mjs";
 
-import "./microphoneStore-6qsb6eV0.mjs";
+import "./microphoneStore-DkUZbjQU.mjs";
 
-import "./volumeStore-Bchda99E.mjs";
+import "./volumeStore-CWqS-X0g.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-Bq4xhoet.mjs";
+import { B as Button } from "./Button-YmXPZrPL.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
-import { I as IconButton } from "./IconButton-D9y0_8qs.mjs";
+import { I as IconButton } from "./IconButton-byqDhHLo.mjs";
 
 var css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",
@@ -103,21 +103,16 @@ const MOTION_CONFIG = {
     } : void 0, [ clearButton ]), setBackgroundColor = useMemo(() => inline ? "unset" : isFocused ? null != backgroundColorFocused ? backgroundColorFocused : "transparent" : null != backgroundColorBlurred ? backgroundColorBlurred : "transparent", [ inline, isFocused, backgroundColorFocused, backgroundColorBlurred ]), setBorderColor = useMemo(() => {
         var _a, _b;
         return "none" === borderType ? "transparent" : error ? null !== (_a = null != borderColorError ? borderColorError : borderColorBlurred) && void 0 !== _a ? _a : "transparent" : isFocused ? null !== (_b = null != borderColorFocused ? borderColorFocused : borderColorBlurred) && void 0 !== _b ? _b : "transparent" : null != borderColorBlurred ? borderColorBlurred : "transparent";
-    }, [ borderType, error, isFocused, borderColorError, borderColorFocused, borderColorBlurred ]), setBoxShadow = useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = useMemo(() => error ? null != textColorError ? textColorError : "var(--core-text-primary)" : isFocused ? null != textColorFocused ? textColorFocused : "var(--core-text-primary)" : null != textColorBlurred ? textColorBlurred : "var(--core-text-primary)", [ isFocused, error, textColorError, textColorFocused, textColorBlurred ]), setTextAlign = useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), setPaddingRight = useMemo(() => {
-        const defaultPadding = clearButton ? 8 : 16;
-        if (!padding) return defaultPadding;
-        if ("string" == typeof padding) {
-            const paddingParts = padding.split(" "), sidePadding = paddingParts[1 === paddingParts.length ? 0 : 1], sideAsNumber = Number.parseFloat(sidePadding.replace("px", ""));
-            return Number.isNaN(sideAsNumber) ? defaultPadding : sideAsNumber - 4;
-        }
-        return clearButton ? padding - 4 : padding;
-    }, [ padding, clearButton ]), cssVars = useMemo(() => ({
+    }, [ borderType, error, isFocused, borderColorError, borderColorFocused, borderColorBlurred ]), setBoxShadow = useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = useMemo(() => error ? null != textColorError ? textColorError : "var(--core-text-primary)" : isFocused ? null != textColorFocused ? textColorFocused : "var(--core-text-primary)" : null != textColorBlurred ? textColorBlurred : "var(--core-text-primary)", [ isFocused, error, textColorError, textColorFocused, textColorBlurred ]), setTextAlign = useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), resolvedPadding = useMemo(() => {
+        if (null != padding) return "number" == typeof padding ? `${padding}px` : padding;
+        const iconInset = "calc(var(--spacing-m) - var(--spacing-xs))";
+        return `var(--spacing-s) ${"password" === inputType && !noShow || !actionButton && clearButton ? iconInset : "var(--spacing-m)"} var(--spacing-s) ${iconLeft && !label ? iconInset : "var(--spacing-m)"}`;
+    }, [ padding, iconLeft, label, inputType, noShow, actionButton, clearButton ]), cssVars = useMemo(() => ({
         "--tf-input-width": "unset" !== size.width && "100%",
         "--tf-field-size": "auto" === size.width ? "content" : "unset",
         "--tf-width": setStyle(size.width),
         "--tf-height": setStyle(size.height),
-        "--tf-padding": setStyle(padding, "8px 10px"),
-        "--tf-padding-right": `${setPaddingRight}px`,
+        "--tf-padding": resolvedPadding,
         "--tf-padding-label-left": "" === label ? "unset" : "0",
         "--tf-border-radius": setStyle(borderRadius),
         "--tf-bg-color": setBackgroundColor,
@@ -127,7 +122,7 @@ const MOTION_CONFIG = {
         "--tf-text-align": setTextAlign,
         "--tf-show-opacity": setShowOpacity,
         "--tf-placeholder-color": null != textColorPlaceholder ? textColorPlaceholder : "var(--core-text-disabled)"
-    }), [ size, padding, label, borderRadius, setBackgroundColor, setBoxShadow, textColor, setTextAlign, setShowOpacity, textColorPlaceholder, textColorDisabled, labelColor, disabled, setPaddingRight ]);
+    }), [ size, label, borderRadius, setBackgroundColor, setBoxShadow, textColor, setTextAlign, setShowOpacity, textColorPlaceholder, textColorDisabled, labelColor, disabled, resolvedPadding ]);
     return jsxs("div", Object.assign({
         id: divId,
         className: `${css.wrapper}${divClass}`,
@@ -208,7 +203,7 @@ const MOTION_CONFIG = {
             }) ]
         }) ]
     }));
-}, (prevProps, nextProps) => prevProps.value === nextProps.value && prevProps.borderType === nextProps.borderType && prevProps.borderRadius === nextProps.borderRadius && prevProps.borderColorFocused === nextProps.borderColorFocused && prevProps.borderColorBlurred === nextProps.borderColorBlurred && prevProps.borderColorError === nextProps.borderColorError && prevProps.backgroundColorFocused === nextProps.backgroundColorFocused && prevProps.backgroundColorBlurred === nextProps.backgroundColorBlurred && prevProps.textColorFocused === nextProps.textColorFocused && prevProps.textColorBlurred === nextProps.textColorBlurred && prevProps.textColorError === nextProps.textColorError && prevProps.textColorPlaceholder === nextProps.textColorPlaceholder && prevProps.textColorDisabled === nextProps.textColorDisabled && prevProps.labelColor === nextProps.labelColor && prevProps.labelSize === nextProps.labelSize && prevProps.focused === nextProps.focused && prevProps.error === nextProps.error && prevProps.disabled === nextProps.disabled && prevProps.label === nextProps.label && prevProps.inputType === nextProps.inputType && prevProps.textSize === nextProps.textSize && prevProps.padding === nextProps.padding && prevProps.textAlign === nextProps.textAlign && prevProps.placeholder === nextProps.placeholder);
+}, (prevProps, nextProps) => prevProps.value === nextProps.value && prevProps.borderType === nextProps.borderType && prevProps.borderRadius === nextProps.borderRadius && prevProps.borderColorFocused === nextProps.borderColorFocused && prevProps.borderColorBlurred === nextProps.borderColorBlurred && prevProps.borderColorError === nextProps.borderColorError && prevProps.backgroundColorFocused === nextProps.backgroundColorFocused && prevProps.backgroundColorBlurred === nextProps.backgroundColorBlurred && prevProps.textColorFocused === nextProps.textColorFocused && prevProps.textColorBlurred === nextProps.textColorBlurred && prevProps.textColorError === nextProps.textColorError && prevProps.textColorPlaceholder === nextProps.textColorPlaceholder && prevProps.textColorDisabled === nextProps.textColorDisabled && prevProps.labelColor === nextProps.labelColor && prevProps.labelSize === nextProps.labelSize && prevProps.focused === nextProps.focused && prevProps.error === nextProps.error && prevProps.disabled === nextProps.disabled && prevProps.label === nextProps.label && prevProps.inputType === nextProps.inputType && prevProps.textSize === nextProps.textSize && prevProps.padding === nextProps.padding && prevProps.iconLeft === nextProps.iconLeft && prevProps.clearButton === nextProps.clearButton && prevProps.actionButton === nextProps.actionButton && prevProps.noShow === nextProps.noShow && prevProps.textAlign === nextProps.textAlign && prevProps.placeholder === nextProps.placeholder);
 
 TextField.displayName = "TextField";
 

package/dist/esm/chunks/{Tip-CCrn5riH.mjs → Tip-CNKUHvPz.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest } from "./tslib.es6-CV__4jU7.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -7,7 +7,7 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, f as filterClasses } from "./misc-DtngeJIC.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
@@ -51,11 +51,11 @@ const tipBasePos = {
         };
     }, [ coords, showDelay, hideDelay ]), useEffect(() => setAnimate(ready), [ ready ]);
     const cssVars = useMemo(() => ({
-        "--tooltip-padding": null != padding ? padding : "3px 6px",
+        "--tooltip-padding": 0 === padding ? "0px" : setStyle(padding, "var(--spacing-xs) var(--spacing-s)"),
         "--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 : `${corners["corner-xs"]}px`
+        "--tooltip-border-radius": setStyle(resolvedBorderRadius, corners["corner-xs"])
     }), [ padding, resolvedBackgroundColor, resolvedTextColor, border, borderColor, resolvedBorderRadius ]), coordStyle = useMemo(() => {
         const {left: left, top: top} = pos;
         return {

package/dist/esm/chunks/{Toast-DWhivCO9.mjs → Toast-udN4QBvW.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest } from "./tslib.es6-CV__4jU7.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -11,23 +11,25 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
+import { corners } from "../theme/corners.mjs";
+
 import "../theme/type.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
-import "./webRTCStore-0Fv3Wnrg.mjs";
+import "./webRTCStore-BmyEouBv.mjs";
 
-import "./microphoneStore-6qsb6eV0.mjs";
+import "./microphoneStore-DkUZbjQU.mjs";
 
-import "./volumeStore-Bchda99E.mjs";
+import "./volumeStore-CWqS-X0g.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CklbjFdQ.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-DvrIrgxu.mjs";
 
 var ToastType, css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",
@@ -47,7 +49,7 @@ var ToastType, css = {
 }(ToastType || (ToastType = {}));
 
 const ToastBase = React.forwardRef((props, ref) => {
-    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);
+    const {notifId: notifId, message: message = null, textSize: textSize = "m", border: border = !0, padding: padding, radius: radius = corners["corner-m"], 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(() => {
@@ -58,7 +60,7 @@ const ToastBase = React.forwardRef((props, ref) => {
             timer.current && clearTimeout(timer.current);
         };
     }, [ message, showDelay, duration ]), useEffect(() => setReady(null !== content), [ content ]);
-    const defaultPadding = useMemo(() => close ? "10px 12px 10px 16px" : "10px 16px", [ close ]), colorScheme = useMemo(() => {
+    const defaultPadding = useMemo(() => close ? "var(--spacing-s) calc(var(--spacing-m) - var(--spacing-xs)) var(--spacing-s) var(--spacing-m)" : "var(--spacing-s) var(--spacing-m)", [ close ]), colorScheme = useMemo(() => {
         switch (type) {
           case "success":
             return {
@@ -89,11 +91,11 @@ const ToastBase = React.forwardRef((props, ref) => {
             };
         }
     }, [ type ]), cssVars = useMemo(() => ({
-        "--toast-padding": setStyle(padding, defaultPadding),
+        "--toast-padding": 0 === padding ? "0px" : setStyle(padding, defaultPadding),
         "--toast-background": colorScheme.bg,
         "--toast-color": colorScheme.text,
         "--toast-border": border ? `1px solid ${colorScheme.border}` : "unset",
-        "--toast-border-radius": setStyle(radius, 4),
+        "--toast-border-radius": setStyle(radius, corners["corner-xs"]),
         "--toast-position": "window" === container ? "fixed" : "absolute"
     }), [ padding, border, colorScheme, radius, defaultPadding, container ]), variants = useMemo(() => {
         const positionShow = "bottom" === position ? {

package/dist/esm/chunks/{ToggleButton-C_52LsVX.mjs → ToggleButton-Bu0h-627.mjs}

@@ -3,9 +3,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import { useMemo } from "react";
 
-import { I as IconButton } from "./IconButton-D9y0_8qs.mjs";
+import { I as IconButton } from "./IconButton-byqDhHLo.mjs";
 
-import { L as Label } from "./Label-Cb1TNTGX.mjs";
+import { L as Label } from "./Label-DnHSkAZF.mjs";
 
 var css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{UploadArea-DJxjadCV.mjs → UploadArea-CkF7ubsS.mjs}

@@ -5,13 +5,13 @@ import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
 import { corners } from "../theme/corners.mjs";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CklbjFdQ.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-DvrIrgxu.mjs";
 
-import { F as FileList } from "./FileList-DYvUHXyd.mjs";
+import { F as FileList } from "./FileList-DeuwRbr1.mjs";
 
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
@@ -36,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 = 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(() => {
+    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 = "var(--spacing-xl)", 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());
@@ -60,7 +60,7 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
         "--ua-border": `${resolvedBorderWidth}px`,
         "--ua-border-style": borderStyle,
         "--ua-border-color": hovered || busy ? borderColorHover : borderColor,
-        "--ua-radius": `${resolvedBorderRadius}px`,
+        "--ua-radius": setStyle(resolvedBorderRadius),
         "--ua-padding": setStyle(padding),
         "--ua-bg-color": hovered ? resolvedBackgroundColorHover : resolvedBackgroundColor,
         "--ua-icon-size": `${iconSize}px`,
@@ -115,7 +115,11 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
                 direction: "column",
                 gap: 8,
                 iconSize: 24,
-                padding: "10px",
+                style: {
+                    "--file-row-vertical": "var(--spacing-s)",
+                    "--file-row-horizontal": "var(--spacing-m)",
+                    "--file-row-adjustment": "var(--spacing-xs)"
+                },
                 canRemove: canRemove
             })
         }), jsx("input", {

package/dist/esm/chunks/{Video-DiuWxBAM.mjs → Video-CeHfRclT.mjs}

@@ -1,19 +1,21 @@
 'use client';
-import { a as __rest, _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest, _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { I as IconButton } from "./IconButton-D9y0_8qs.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-CklbjFdQ.mjs";
+import { I as IconButton } from "./IconButton-byqDhHLo.mjs";
 
-import { S as Slider } from "./Slider-By-9skcp.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-DvrIrgxu.mjs";
 
-import { T as ToggleButton } from "./ToggleButton-C_52LsVX.mjs";
+import { S as Slider } from "./Slider-5sz0qeXF.mjs";
+
+import { T as ToggleButton } from "./ToggleButton-Bu0h-627.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";
 
@@ -143,14 +145,14 @@ const BaseVideo = React.forwardRef((props, ref) => {
     const showCustomControls = useMemo(() => "default" !== controls && "none" !== controls, [ controls ]), cssVars = useMemo(() => ({
         "--video-width": setStyle(width, "unset"),
         "--video-height": setStyle(height, "unset"),
-        "--video-border-radius": setStyle(borderRadius, 0),
+        "--video-border-radius": setStyle(borderRadius, corners["corner-none"]),
         "--video-border-size": setStyle(borderSize, 0),
         "--video-border-color": setStyle(borderColor, "transparent"),
         "--video-bg-color": setStyle(backgroundColor, "transparent"),
         "--video-object-fit": null != objectFit ? objectFit : "contain",
         "--video-controls-pointer-events": hovered ? "auto" : "none",
         "--video-controls-opacity": hovered ? 1 : 0,
-        "--video-progress-padding-left": customControls.quit ? "8px" : "16px"
+        "--video-progress-padding-left": customControls.quit ? "var(--spacing-s)" : "var(--spacing-m)"
     }), [ width, height, borderRadius, borderSize, borderColor, backgroundColor, objectFit, hovered, customControls.quit ]), speakerIcon = useMemo(() => isMuted || 0 === currentVolume ? "speaker muted" : "speaker", [ isMuted, currentVolume ]);
     return useEffect(() => handleRateChange(playRate), [ playRate, handleRateChange ]), 
     useEffect(() => {

package/dist/esm/chunks/{VideoController-BWvCRNoR.mjs → VideoController-D0EXRyjT.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest } from "./tslib.es6-CV__4jU7.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -7,21 +7,21 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef, useState, useEffect, useMemo } from "react";
 
-import "./microphoneStore-6qsb6eV0.mjs";
+import "./microphoneStore-DkUZbjQU.mjs";
 
-import "./volumeStore-Bchda99E.mjs";
+import "./volumeStore-CWqS-X0g.mjs";
 
-import "./webRTCStore-0Fv3Wnrg.mjs";
+import "./webRTCStore-BmyEouBv.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
-import { I as IconButton } from "./IconButton-D9y0_8qs.mjs";
+import { I as IconButton } from "./IconButton-byqDhHLo.mjs";
 
-import { O as Overlay } from "./Overlay-je9uxyF7.mjs";
+import { O as Overlay } from "./Overlay-CXGkHAtm.mjs";
 
-import { u as useVideo, a as useVideoActions } from "./videoStore-CBfvbDcQ.mjs";
+import { u as useVideo, a as useVideoActions } from "./videoStore-DzD6pFQl.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";
 
@@ -43,14 +43,14 @@ 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 = corners["corner-m"], quit: quit = "inline", showProgressIndicator: showProgressIndicator = !0, 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 = "var(--spacing-xxl)", borderRadius: borderRadius = corners["corner-m"], quit: quit = "inline", showProgressIndicator: showProgressIndicator = !0, 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 ]);
     const handleHide = () => {
         setReady(!1), hide(), null == onQuit || onQuit();
     }, cssVars = useMemo(() => ({
-        "--overlay-padding": setStyle(padding, 64),
+        "--overlay-padding": setStyle(padding, "var(--spacing-xxl)"),
         "--video-visibility": ready ? "visible" : "hidden",
         "--video-border-radius": setStyle(borderRadius, corners["corner-m"])
     }), [ padding, ready, borderRadius ]);

package/dist/esm/chunks/{WSConnection-nyuthu2w.mjs → WSConnection-n1TRftv9.mjs}

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

package/dist/esm/chunks/{WebRTCConnection-9m7x937g.mjs → WebRTCConnection-tvD_P75V.mjs}

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

package/dist/esm/chunks/{browserChannelsStore-smRS4Hid.mjs → browserChannelsStore-B-xC9TOO.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-CE_8mdQi.mjs";
+import "./tslib.es6-CV__4jU7.mjs";
 
-import { B as BrowserChannel, M as MessageType } from "./broadcastChannel-B-jhrR3a.mjs";
+import { B as BrowserChannel, M as MessageType } from "./broadcastChannel-QIWda6rB.mjs";
 
 const useBrowserChannelsStore = create((set, get) => ({
     channels: null,

package/dist/esm/chunks/{localDBStore-ONbAby1P.mjs → localDBStore-CZslfcnT.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter, a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter, a as __rest } from "./tslib.es6-CV__4jU7.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-DcKlcEts.mjs";
+import { I as IndexedDB } from "./IndexedDB-DUCWUJdN.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));

package/dist/esm/chunks/{microphoneStore-6qsb6eV0.mjs → microphoneStore-DkUZbjQU.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 import { useEffect } from "react";
 

package/dist/esm/chunks/{misc-_71JTGbu.mjs → misc-DtngeJIC.mjs}

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

package/dist/esm/chunks/{sseStore-Cqbsz4ER.mjs → sseStore-D45Ex3w6.mjs}

@@ -1,10 +1,10 @@
 import { create } from "zustand";
 
-import "./tslib.es6-CE_8mdQi.mjs";
+import "./tslib.es6-CV__4jU7.mjs";
 
-import { S as SSEConnection } from "./SSEConnection-5K8PW_M0.mjs";
+import { S as SSEConnection } from "./SSEConnection-DkGC07fu.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
 const useSSEStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{uploads-worker-D3JPUPSZ.mjs → uploads-worker-BuH0JRF9.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 var FileUploadStatus, UploadError, WorkerStatus;
 

package/dist/esm/chunks/{uploadsStore-DE-A-CML.mjs → uploadsStore-BkOKmrJc.mjs}

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

package/dist/esm/chunks/{viewState-C34wAgGX.mjs → viewState-uX0vekU4.mjs}

@@ -4,25 +4,25 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from "react"
 
 import { corners } from "../theme/corners.mjs";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import "./tslib.es6-CE_8mdQi.mjs";
+import "./tslib.es6-CV__4jU7.mjs";
 
-import { r as rafThrottle } from "./rafThrottle-D2dyeVut.mjs";
+import { r as rafThrottle } from "./rafThrottle-CA0kPebe.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
-import "./webRTCStore-0Fv3Wnrg.mjs";
+import "./webRTCStore-BmyEouBv.mjs";
 
-import "./microphoneStore-6qsb6eV0.mjs";
+import "./microphoneStore-DkUZbjQU.mjs";
 
-import "./volumeStore-Bchda99E.mjs";
+import "./volumeStore-CWqS-X0g.mjs";
 
 import "../hooks/useWindow.mjs";
 
@@ -110,7 +110,7 @@ function DataTable(props) {
         "--table-border-width": "none" === borderStyle ? "0" : "1px",
         "--table-border-sides": "box" === borderStyle ? "1px" : "0",
         "--table-handle-hover-color": handleHoverColor,
-        "--table-border-radius": "box" === borderStyle ? setStyle(borderRadius) : 0
+        "--table-border-radius": "box" === borderStyle ? setStyle(borderRadius) : corners["corner-none"]
     }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor, borderRadius, maxWidth, margin ]), handleCreateRefs = useCallback((el, id) => {
         colRefs.current[id] = el;
     }, []), orderedColumns = useMemo(() => {
@@ -361,7 +361,7 @@ function DataTable(props) {
             }), jsx("thead", {
                 children: jsx("tr", {
                     children: orderedColumns.map((col, colIndex) => {
-                        const padding = setStyle(col.padding, 16), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, background = draggedColId === col.id ? backgroundColor : headerBackgroundColor;
+                        const padding = setStyle(col.padding, "var(--spacing-m)"), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, background = draggedColId === col.id ? backgroundColor : headerBackgroundColor;
                         return jsxs("th", {
                             "data-column-id": col.id,
                             className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
@@ -405,7 +405,7 @@ function DataTable(props) {
                     return jsx("tr", {
                         "aria-rowindex": rowWindow.enabled ? rowIndex + 2 : void 0,
                         children: orderedColumns.map((col, colIndex) => {
-                            const justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1, borderBottom = rowWindow.enabled && isLastRow && rowWindow.bottomSpacerHeight > 0 ? 0 : void 0;
+                            const justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, "var(--spacing-m)"), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), last = colIndex === orderedColumns.length - 1, opacity = draggedColId === col.id ? .2 : 1, borderBottom = rowWindow.enabled && isLastRow && rowWindow.bottomSpacerHeight > 0 ? 0 : void 0;
                             return jsxs("td", {
                                 "data-column-id": `${colIndex}.${rowIndex}`,
                                 className: `${styles.baseCell} ${styles.m}`,

package/dist/esm/chunks/{volumeStore-Bchda99E.mjs → volumeStore-CWqS-X0g.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/chunks/{webRTCStore-0Fv3Wnrg.mjs → webRTCStore-BmyEouBv.mjs}

@@ -1,10 +1,10 @@
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 import { create } from "zustand";
 
-import { W as WebRTCConnection } from "./WebRTCConnection-9m7x937g.mjs";
+import { W as WebRTCConnection } from "./WebRTCConnection-tvD_P75V.mjs";
 
-import "./broadcastChannel-B-jhrR3a.mjs";
+import "./broadcastChannel-QIWda6rB.mjs";
 
 const useWebRTCStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{windowStore-DcPWzksH.mjs → windowStore-Da3BCfMQ.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/components/AudioBubble/index.mjs

@@ -1,6 +1,6 @@
-export { A as AudioBubble } from "../../chunks/AudioBubble-BMvVC5-0.mjs";
+export { A as AudioBubble } from "../../chunks/AudioBubble-DwE50YGL.mjs";
 
-import "../../chunks/tslib.es6-CE_8mdQi.mjs";
+import "../../chunks/tslib.es6-CV__4jU7.mjs";
 
 import "react/jsx-runtime";
 
@@ -24,20 +24,20 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/colors-BX0EXrOS.mjs";
+import "../../chunks/colors-B_YmJkkL.mjs";
 
-import "../../chunks/audioVisualizer-B-dLbWMF.mjs";
+import "../../chunks/audioVisualizer-BwIDqL-t.mjs";
 
-import "../../chunks/broadcastChannel-B-jhrR3a.mjs";
+import "../../chunks/broadcastChannel-QIWda6rB.mjs";
 
-import "../../chunks/webRTCStore-0Fv3Wnrg.mjs";
+import "../../chunks/webRTCStore-BmyEouBv.mjs";
 
 import "zustand";
 
-import "../../chunks/WebRTCConnection-9m7x937g.mjs";
+import "../../chunks/WebRTCConnection-tvD_P75V.mjs";
 
-import "../../chunks/microphoneStore-6qsb6eV0.mjs";
+import "../../chunks/microphoneStore-DkUZbjQU.mjs";
 
-import "../../chunks/volumeStore-Bchda99E.mjs";
+import "../../chunks/volumeStore-CWqS-X0g.mjs";
 
 import "../../hooks/useWindow.mjs";

package/dist/esm/components/Avatar/index.mjs

@@ -1,9 +1,9 @@
-export { A as Avatar } from "../../chunks/Avatar-Ce0nIuFe.mjs";
+export { A as Avatar } from "../../chunks/Avatar-BdjtrRLS.mjs";
 
-import "../../chunks/tslib.es6-CE_8mdQi.mjs";
+import "../../chunks/tslib.es6-CV__4jU7.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/misc-_71JTGbu.mjs";
+import "../../chunks/misc-DtngeJIC.mjs";

package/dist/esm/components/AvatarGroup/index.mjs

@@ -1,11 +1,11 @@
-export { A as AvatarGroup } from "../../chunks/AvatarGroup-DLqBXeB9.mjs";
+export { A as AvatarGroup } from "../../chunks/AvatarGroup-BM-jh9BQ.mjs";
 
-import "../../chunks/tslib.es6-CE_8mdQi.mjs";
+import "../../chunks/tslib.es6-CV__4jU7.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/Avatar-Ce0nIuFe.mjs";
+import "../../chunks/Avatar-BdjtrRLS.mjs";
 
-import "../../chunks/misc-_71JTGbu.mjs";
+import "../../chunks/misc-DtngeJIC.mjs";