@apple-pie/slice 0.1.56 → 0.1.58

package/dist/esm/chunks/{AudioBubble-BMvVC5-0.mjs → AudioBubble-DwE50YGL.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";
 
@@ -11,17 +11,17 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as addOpacity } from "./colors-BX0EXrOS.mjs";
+import { a as addOpacity } from "./colors-B_YmJkkL.mjs";
 
-import { A as AudioVisualizer } from "./audioVisualizer-B-dLbWMF.mjs";
+import { A as AudioVisualizer } from "./audioVisualizer-BwIDqL-t.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";
 

package/dist/esm/chunks/{Avatar-Ce0nIuFe.mjs → Avatar-BdjtrRLS.mjs}

@@ -1,11 +1,11 @@
 '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";
 
 import React, { useRef, useState, useMemo, useEffect, useCallback } from "react";
 
-import { n as normalizedPercent, a as accessibleKeyDown, s as setStyle } from "./misc-_71JTGbu.mjs";
+import { n as normalizedPercent, a as accessibleKeyDown, s as setStyle } from "./misc-DtngeJIC.mjs";
 
 var css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
 
@@ -61,7 +61,7 @@ const Avatar = React.memo(props => {
         "--avatar-border-color-hover": null != borderColorHover ? borderColorHover : "var(--core-outline-special)",
         "--avatar-bg-image": `${bgImage}`,
         "--avatar-font-size": setStyle(textSize),
-        "--avatar-outer-border-size": setStyle(outerBorderSize),
+        "--avatar-outer-border-size": `${null != outerBorderSize ? outerBorderSize : 0}px`,
         "--avatar-outer-border-color": null != outerBorderColor ? outerBorderColor : "var(--core-surface-primary)"
     }), [ size, frame, resolvedBorderWidth, resolvedTextColor, resolvedBackgroundColor, borderColor, borderColorHover, bgImage, textSize, outerBorderSize, outerBorderColor ]), classNames = useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
     return jsx("div", Object.assign({

package/dist/esm/chunks/{AvatarGroup-DLqBXeB9.mjs → AvatarGroup-BM-jh9BQ.mjs}

@@ -1,11 +1,11 @@
 '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";
 
 import React, { useMemo } from "react";
 
-import { A as Avatar } from "./Avatar-Ce0nIuFe.mjs";
+import { A as Avatar } from "./Avatar-BdjtrRLS.mjs";
 
 var css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
 

package/dist/esm/chunks/{Badge-DKkqjW28.mjs → Badge-CHPL-h3Z.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";
 

package/dist/esm/chunks/{Button-Bq4xhoet.mjs → Button-YmXPZrPL.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";
 
@@ -9,15 +9,15 @@ import React, { forwardRef, useState, useRef, useCallback, useEffect, useImperat
 
 import { corners } from "../theme/corners.mjs";
 
-import { B as Badge } from "./Badge-DKkqjW28.mjs";
+import { B as Badge } from "./Badge-CHPL-h3Z.mjs";
 
-import { D as Dot } from "./Dot-D6uHXyGY.mjs";
+import { D as Dot } from "./Dot-Bfl1kBUQ.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 { T as ToolTipType } from "./sharedTypes-CmJ2hQtY.mjs";
+import { T as ToolTipType } from "./sharedTypes-BFgEbKnN.mjs";
 
 var css = {
     button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
@@ -124,9 +124,8 @@ const ButtonComponent = forwardRef((props, buttonRef) => {
         text: text
     }), [ solid, outline, text ]), setPadding = useCallback(side => {
         if (round) return 0;
-        let padding = 20;
-        return "text" === variant && (padding = 0), "small" === size && (padding = 12), 
-        "left" === side && iconLeft || "right" === side && iconRight ? padding : padding + 4;
+        const padding = "text" === variant ? "var(--spacing-xs)" : "small" === size ? "var(--spacing-m)" : "var(--spacing-l)";
+        return ("left" === side ? iconLeft : iconRight) ? `calc(${padding} - var(--spacing-xs))` : padding;
     }, [ round, variant, size, iconLeft, iconRight ]), sizingStyles = useMemo(() => ({
         large: {
             height: 48,
@@ -154,8 +153,8 @@ const ButtonComponent = forwardRef((props, buttonRef) => {
             iconSize: iconSize,
             paddingLeft: setPadding("left"),
             paddingRight: setPadding("right"),
-            paddingTop: 4,
-            paddingBottom: 4,
+            paddingTop: "var(--spacing-xs)",
+            paddingBottom: "var(--spacing-xs)",
             borderRadius: null != borderRadius ? borderRadius : corners["corner-round"]
         }
     }), [ iconSize, borderRadius, setPadding ]), handleMouseEnter = useCallback(e => {

package/dist/esm/chunks/{ButtonBar-BAqLCnso.mjs → ButtonBar-CKagtnCT.mjs}

@@ -1,15 +1,15 @@
 '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";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
 

package/dist/esm/chunks/{Camera-DJhp-3_t.mjs → Camera-CRDO4oL5.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 { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,23 +11,23 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import { a as addOpacity } from "./colors-BX0EXrOS.mjs";
+import { a as addOpacity } from "./colors-B_YmJkkL.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 { A as Avatar } from "./Avatar-Ce0nIuFe.mjs";
+import { A as Avatar } from "./Avatar-BdjtrRLS.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css_wrapper = "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq", css_video = "Camera-module_video__Q2r9B", css_controls = "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi", css_controlsRight = "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm", css_controlsCenter = "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF", css_controlsLeft = "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS", css_error = "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_poster = "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_snapshotFrame = "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF", css_clear = "Camera-module_clear__aaCfT", css_snapshot = "Camera-module_snapshot__odQH0", css_toolbarButton = "Camera-module_toolbarButton__mnmoF flexBox-module_columnStartCenter__PKcrG", css_buttonIcon = "Camera-module_buttonIcon__a-VBR flexBox-module_row__z24tF", css_buttonLabel = "Camera-module_buttonLabel__6BEs1 flexBox-module_row__z24tF type-module_body-xs-regular__ZAFft";
 

package/dist/esm/chunks/{CheckBox-CL37t7_J.mjs → CheckBox-B-vtYku8.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";
 
@@ -7,9 +7,9 @@ import { motion } from "motion/react";
 
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 
-import { a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
 

package/dist/esm/chunks/{Chip-Bjg-ONP_.mjs → Chip-BUJmKr_n.mjs}

@@ -1,17 +1,17 @@
 '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";
 
 import React, { useState, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-CmJ2hQtY.mjs";
+import { T as ToolTipType } from "./sharedTypes-BFgEbKnN.mjs";
 
 var css = {
     chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
@@ -24,7 +24,7 @@ var css = {
 };
 
 const Chip = React.memo(props => {
-    const {variant: variant = "normal", children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = ("normal" === variant ? labelColor : "var(--core-text-special)"), iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = ("normal" === variant ? iconColor : "var(--core-text-special)"), backgroundColor: backgroundColor = "transparent", backgroundColorHover: backgroundColorHover = ("normal" === variant ? backgroundColor : "var(--core-surface-secondary)"), borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = ("normal" === variant ? borderColor : "var(--core-text-special)"), borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", borderRadius: borderRadius = corners["corner-m"], paddingTop: paddingTop, paddingTops: paddingTops = 8, paddingSides: paddingSides = 16, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "variant", "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = useCallback(e => {
+    const {variant: variant = "normal", children: children, label: label, icon: icon, tooltip: tooltip, iconSize: iconSize = 20, disabled: disabled = !1, focused: focused = !1, iconPosition: iconPosition = "left", labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", labelColorHover: labelColorHover = ("normal" === variant ? labelColor : "var(--core-text-special)"), iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = ("normal" === variant ? iconColor : "var(--core-text-special)"), backgroundColor: backgroundColor = "transparent", backgroundColorHover: backgroundColorHover = ("normal" === variant ? backgroundColor : "var(--core-surface-secondary)"), borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-text-primary)", borderColorHover: borderColorHover = ("normal" === variant ? borderColor : "var(--core-text-special)"), borderColorDisabled: borderColorDisabled = "var(--core-text-disabled)", borderRadius: borderRadius = corners["corner-m"], paddingTop: paddingTop, paddingTops: paddingTops, paddingSides: paddingSides, gap: gap = 4, onToolTip: onToolTip = () => null, onClick: onClick = () => null} = props, divAttributes = __rest(props, [ "variant", "children", "label", "icon", "tooltip", "iconSize", "disabled", "focused", "iconPosition", "labelSize", "labelColor", "labelColorHover", "iconColor", "iconColorHover", "backgroundColor", "backgroundColorHover", "borderWidth", "borderSize", "borderColor", "borderColorHover", "borderColorDisabled", "borderRadius", "paddingTop", "paddingTops", "paddingSides", "gap", "onToolTip", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isHovered, setIsHovered] = useState(!1), resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedPaddingTop = null != paddingTop ? paddingTop : paddingTops, handleClick = useCallback(e => {
         disabled || onClick(e);
     }, [ disabled, onClick ]), handleMouseEnter = useCallback((enter, event) => {
         if (enter) {
@@ -42,9 +42,11 @@ const Chip = React.memo(props => {
             "button" === variant && setIsHovered(!0);
         } else onToolTip(null), setIsHovered(!1);
     }, [ tooltip, variant, onToolTip ]), padding = useMemo(() => {
-        if (!label || !icon) return `${resolvedPaddingTop}px ${paddingSides}px`;
-        return `${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides - 4 : paddingSides}px ${resolvedPaddingTop}px ${"right" === iconPosition ? paddingSides : paddingSides - 4}px`;
-    }, [ icon, iconPosition, resolvedPaddingTop, paddingSides, label ]), computedIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : isHovered ? null != iconColorHover ? iconColorHover : "var(--core-text-special)" : null != iconColor ? iconColor : "var(--core-text-primary)", [ iconColor, disabled, isHovered, iconColorHover ]), cssVars = useMemo(() => ({
+        const compact = "s" === labelSize || "xs" === labelSize, vertical = void 0 === resolvedPaddingTop ? compact ? "var(--spacing-xs)" : "var(--spacing-s)" : `${resolvedPaddingTop}px`, horizontal = void 0 === paddingSides ? compact ? "var(--spacing-s)" : "var(--spacing-m)" : `${paddingSides}px`;
+        if (!label || !icon || void 0 !== paddingSides) return `${vertical} ${horizontal}`;
+        const iconPadding = `calc(${horizontal} - var(--spacing-${compact ? "xxs" : "xs"}))`;
+        return `${vertical} ${"right" === iconPosition ? iconPadding : horizontal} ${vertical} ${"right" === iconPosition ? horizontal : iconPadding}`;
+    }, [ icon, iconPosition, resolvedPaddingTop, paddingSides, label, labelSize ]), computedIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : isHovered ? null != iconColorHover ? iconColorHover : "var(--core-text-special)" : null != iconColor ? iconColor : "var(--core-text-primary)", [ iconColor, disabled, isHovered, iconColorHover ]), cssVars = useMemo(() => ({
         "--ui-chip-padding": padding,
         "--ui-chip-gap": setStyle(gap),
         "--ui-chip-border-radius": setStyle(borderRadius),

package/dist/esm/chunks/{DivInput-D6kq1bR0.mjs → DivInput-BQMy-OA9.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, { useRef, useState, useCallback, useEffect, useMemo } from "react";
 
-import { b as cleanString } from "./misc-_71JTGbu.mjs";
+import { b as cleanString, s as setStyle } from "./misc-DtngeJIC.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
@@ -82,7 +82,7 @@ const DivInput = React.memo(props => {
         "--div-input-cursor": isEditable ? "text" : "default",
         "--div-input-bg": isEditable ? null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)" : "transparent",
         "--div-input-wrapper-bg": isEditable && isFocused ? null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)" : "transparent",
-        "--div-input-border-radius": `${resolvedBorderRadius}px`
+        "--div-input-border-radius": setStyle(resolvedBorderRadius)
     }), [ clamp, wrap, isEditable, width, textAlign, isFocused, padding, isPlaceholder, setWidth, resolvedBackgroundColor, resolvedBorderRadius ]);
     return jsx("div", Object.assign({
         id: divId,

package/dist/esm/chunks/{Dot-D6uHXyGY.mjs → Dot-Bfl1kBUQ.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";
 
@@ -41,7 +41,7 @@ const DEFAULT_VARIANTS = {
           case "grey":
             return "var(--core-text-secondary)";
         }
-        return "var(--core-text-special)";
+        return "var(--core-gp-logo-primary)";
     }, [ state, color ]), cssVars = useMemo(() => ({
         "--dot-size": `${size}px`,
         "--dot-display": "inline" === position ? "inline-flex" : "flex",

package/dist/esm/chunks/{DrggablePanel-25Wjbf_y.mjs → DrggablePanel-BuMnBc3u.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";
 
@@ -9,17 +9,19 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
+import { corners } from "../theme/corners.mjs";
+
 import "../theme/type.mjs";
 
-import { p as pointerPosition } from "./misc-_71JTGbu.mjs";
+import { p as pointerPosition, 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";
 
@@ -217,10 +219,10 @@ const DraggablePanel = React.memo(props => {
         }) ]
     }));
 }), DragHandle = React.memo(props => {
-    const {width: width = 6, height: height = 6, radius: radius = 100, stroke: stroke = 1, color: color = "var(--core-surface-primary-tint)", strokeColor: strokeColor = "var(--core-outline-secondary)"} = props, cssVars = useMemo(() => ({
+    const {width: width = 6, height: height = 6, radius: radius = corners["corner-round"], stroke: stroke = 1, color: color = "var(--core-surface-primary-tint)", strokeColor: strokeColor = "var(--core-outline-secondary)"} = props, cssVars = useMemo(() => ({
         "--drag-handle-width": `${width}px`,
         "--drag-handle-height": `${height}px`,
-        "--drag-handle-radius": `${radius}px`,
+        "--drag-handle-radius": setStyle(radius),
         "--drag-handle-border": `${stroke}px`,
         "--drag-handle-border-color": `${strokeColor}`,
         "--drag-handle-bg": `${color}`

package/dist/esm/chunks/{DropDown-BiwdsV6m.mjs → DropDown-BsSvP2ji.mjs}

@@ -1,15 +1,15 @@
 '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";
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
 import { corners } from "../theme/corners.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css = {
     wrapper: "DropDown-module_wrapper__CyX0u flexBox-module_rowStart__4tcxS",
@@ -30,7 +30,7 @@ function resolveValueKey(value, valueKey) {
 }
 
 function DropDownComponent(props) {
-    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, selectedIndex: selectedIndex, selectedValue: selectedValue, valueKey: valueKey, options: options = [], placeholder: placeholder = !0, borderRadius: borderRadius = corners["corner-m"], backgroundColor: backgroundColor = "var(--core-surface-secondary)", iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", paddingLeft: paddingLeft = "10px", paddingRight: paddingRight = "8px", paddingTop: paddingTop = "8px", paddingBottom: paddingBottom = "8px", borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange = () => null, onOption: onOption = () => null} = props, divAttributes = __rest(props, [ "name", "label", "labelColor", "textSize", "width", "height", "inline", "selectedIndex", "selectedValue", "valueKey", "options", "placeholder", "borderRadius", "backgroundColor", "iconColor", "textColor", "borderWidth", "borderSize", "borderColor", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onOption" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = useState("Select an option"), ref = useRef(null);
+    const {name: name = "drop-down-select", label: label, labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, selectedIndex: selectedIndex, selectedValue: selectedValue, valueKey: valueKey, options: options = [], placeholder: placeholder = !0, borderRadius: borderRadius = corners["corner-m"], backgroundColor: backgroundColor = "var(--core-surface-secondary)", iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", borderWidth: borderWidth, borderSize: borderSize = 1, borderColor: borderColor = "var(--core-outline-primary)", paddingLeft: paddingLeft = "var(--spacing-m)", paddingRight: paddingRight = "calc(var(--spacing-m) - var(--spacing-xs))", paddingTop: paddingTop = "var(--spacing-s)", paddingBottom: paddingBottom = "var(--spacing-s)", borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange = () => null, onOption: onOption = () => null} = props, divAttributes = __rest(props, [ "name", "label", "labelColor", "textSize", "width", "height", "inline", "selectedIndex", "selectedValue", "valueKey", "options", "placeholder", "borderRadius", "backgroundColor", "iconColor", "textColor", "borderWidth", "borderSize", "borderColor", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onOption" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, [index, setIndex] = useState(null != selectedIndex ? selectedIndex : 0), [selectedText, setSelectedText] = useState("Select an option"), ref = useRef(null);
     useEffect(() => {
         if (null == selectedValue && void 0 !== selectedIndex && (null == ref ? void 0 : ref.current)) {
             if (!(null == options ? void 0 : options[selectedIndex])) return;
@@ -60,11 +60,11 @@ function DropDownComponent(props) {
         disabled && e.preventDefault();
     }, [ disabled ]), handleSelectChange = useCallback(e => {
         handleChange(e.target.selectedIndex);
-    }, [ handleChange ]), setTextColor = useMemo(() => disabled ? "var(--core-text-disabled)" : placeholder && 0 === index ? "var(--core-text-tertiary)" : textColor, [ disabled, placeholder, index, textColor ]), setLabelColor = useMemo(() => disabled ? "var(--core-text-disabled)" : labelColor, [ disabled, labelColor ]), setIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : iconColor, [ disabled, iconColor ]), setBorderColor = useMemo(() => disabled ? "var(--core-outline-primary)" : error ? "var(--feedback-warning)" : borderColor, [ disabled, error, borderColor ]), setPadding = useMemo(() => "box" === borderStyle ? `${setStyle(paddingTop)} ${setStyle(paddingRight)} ${setStyle(paddingBottom)} ${setStyle(paddingLeft)}` : `0 0 ${setStyle(paddingBottom)} 0`, [ paddingTop, paddingRight, paddingBottom, paddingLeft, borderStyle ]), setBorder = useMemo(() => "box" === borderStyle ? `${setStyle(resolvedBorderWidth)} solid ${setBorderColor}` : "unset", [ resolvedBorderWidth, setBorderColor, borderStyle ]), setBorderBottom = useMemo(() => "none" !== borderStyle ? `${setStyle(resolvedBorderWidth)} solid ${setStyle(borderColor)}` : "unset", [ resolvedBorderWidth, borderColor, borderStyle ]), setBorderRadius = useMemo(() => "box" !== borderStyle ? 0 : `${borderRadius}px`, [ borderStyle, borderRadius ]), cssVars = useMemo(() => ({
+    }, [ handleChange ]), setTextColor = useMemo(() => disabled ? "var(--core-text-disabled)" : placeholder && 0 === index ? "var(--core-text-tertiary)" : textColor, [ disabled, placeholder, index, textColor ]), setLabelColor = useMemo(() => disabled ? "var(--core-text-disabled)" : labelColor, [ disabled, labelColor ]), setIconColor = useMemo(() => disabled ? "var(--core-text-disabled)" : iconColor, [ disabled, iconColor ]), setBorderColor = useMemo(() => disabled ? "var(--core-outline-primary)" : error ? "var(--feedback-warning)" : borderColor, [ disabled, error, borderColor ]), setPadding = useMemo(() => "box" === borderStyle ? `${0 === paddingTop ? "0px" : setStyle(paddingTop)} ${0 === paddingRight ? "0px" : setStyle(paddingRight)} ${0 === paddingBottom ? "0px" : setStyle(paddingBottom)} ${0 === paddingLeft ? "0px" : setStyle(paddingLeft)}` : `0 0 ${0 === paddingBottom ? "0px" : setStyle(paddingBottom)} 0`, [ paddingTop, paddingRight, paddingBottom, paddingLeft, borderStyle ]), setBorder = useMemo(() => "box" === borderStyle ? `${setStyle(resolvedBorderWidth)} solid ${setBorderColor}` : "unset", [ resolvedBorderWidth, setBorderColor, borderStyle ]), setBorderBottom = useMemo(() => "none" !== borderStyle ? `${setStyle(resolvedBorderWidth)} solid ${setStyle(borderColor)}` : "unset", [ resolvedBorderWidth, borderColor, borderStyle ]), setBorderRadius = useMemo(() => "box" !== borderStyle ? 0 : setStyle(borderRadius), [ borderStyle, borderRadius ]), cssVars = useMemo(() => ({
         "--dd-gap": setStyle(gap),
         "--dd-height": setStyle(height),
         "--dd-width": setStyle(width),
-        "--dd-margin": inline ? "0 4px" : "0",
+        "--dd-margin": inline ? "0 var(--spacing-xs)" : "0",
         "--dd-border-radius": setBorderRadius,
         "--dd-border": setBorder,
         "--dd-border-bottom": setBorderBottom,

package/dist/esm/chunks/{ErrorSummary-BODIGAst.mjs → ErrorSummary-DMOWFhAu.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";
 
@@ -13,15 +13,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as addOpacity } from "./colors-BX0EXrOS.mjs";
+import { a as addOpacity } from "./colors-B_YmJkkL.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";
 
@@ -66,7 +66,7 @@ const ErrorSummary = React.memo(props => {
             error.message && (messages = Array.isArray(error.message) ? error.message : [ error.message ]);
             return jsxs("div", {
                 className: css.error,
-                children: [ jsx("p", {
+                children: [ jsx("span", {
                     className: `${css.p} ${css[textSize]}`,
                     children: jsx("strong", {
                         children: `${addNumbers ? `${index + 1}. ` : ""}${error.title}`

package/dist/esm/chunks/{FileIcon-CfS-TY-S.mjs → FileIcon-k4eYnLQv.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";
 
@@ -11,15 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { 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";
 

package/dist/esm/chunks/{FileList-DYvUHXyd.mjs → FileList-DeuwRbr1.mjs}

@@ -1,17 +1,17 @@
 '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";
 
 import React, { useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
-import { F as FileIcon } from "./FileIcon-CfS-TY-S.mjs";
+import { F as FileIcon } from "./FileIcon-k4eYnLQv.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";
 
 /**
  * Split a file name into its display name and extension.
@@ -158,14 +158,15 @@ const FileList = React.memo(props => {
         "--file-gap": setStyle(gap),
         "--file-direction": direction,
         "--file-wrap": "column" === direction ? "nowrap" : "wrap",
-        "--file-padding": padding ? setStyle(padding) : "4px 4px 4px 2px",
+        "--file-padding": null != padding ? "number" == typeof padding ? `${padding}px` : padding : void 0,
         "--file-icon-size": setStyle(iconSize),
         "--file-overflow": "column" === direction ? "unset" : "hidden",
         "--file-bg-color": null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)"
-    }), [ maxWidth, gap, direction, minWidth, padding, iconSize, resolvedBackgroundColor ]), fileCSSVars = useCallback((progress, error) => ({
+    }), [ maxWidth, gap, direction, minWidth, padding, iconSize, resolvedBackgroundColor ]), fileCSSVars = useCallback((progress, uploading, error) => ({
         "--file-progress": `${progress}`,
+        "--file-row-right": canRemove && !uploading ? "calc(var(--file-row-horizontal, var(--spacing-xs)) - var(--file-row-adjustment, var(--spacing-xxs)))" : "var(--file-row-horizontal, var(--spacing-xs))",
         "--file-border-color": error ? "var(--feedback-warning)" : "var(--core-outline-primary)"
-    }), []);
+    }), [ canRemove ]);
     return jsx("div", Object.assign({
         className: `${css.wrapper}${divClass}`,
         style: Object.assign(Object.assign({}, divStyle), cssVars),
@@ -174,7 +175,7 @@ const FileList = React.memo(props => {
         children: displayList.map(i => {
             return jsxs("div", {
                 className: `${css.file} ${css[textSize]}`,
-                style: fileCSSVars(i.progress, i.error),
+                style: fileCSSVars(i.progress, i.uploading, i.error),
                 children: [ jsx("div", {
                     className: css.fileIcon,
                     children: jsx(FileIcon, {

package/dist/esm/chunks/{FlexDiv-DIb3pmFo.mjs → FlexDiv-DODEbrMI.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,6 +7,8 @@ import { motion } from "motion/react";
 
 import React, { useMemo, useCallback } from "react";
 
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
+
 var Size, Preset, css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA scrollBars-module_scrollbars__c-ZPl";
 
 !function(Size) {
@@ -119,8 +121,8 @@ function setBox(style) {
     return "number" == typeof style ? `${style}px` : style;
 }
 
-function setPaddingRight(padding, scrollBox, pad = 4) {
-    return padding ? "number" == typeof padding ? `${padding}px` : padding : scrollBox ? `${pad}px` : "unset";
+function setPaddingRight(padding, scrollBox) {
+    return padding ? "number" == typeof padding ? `${padding}px` : padding : scrollBox ? "var(--spacing-xs)" : "unset";
 }
 
 function setFlex(style) {
@@ -162,7 +164,7 @@ const FlexDiv = React.memo(React.forwardRef((props, ref) => {
         overflow: presets.overflow,
         overflowY: setScroll(presets.scrollY),
         overflowX: setScroll(presets.scrollX),
-        borderRadius: borderRadius ? `${borderRadius}px` : "unset",
+        borderRadius: setStyle(borderRadius),
         color: "var(--core-text-primary)",
         "--flex-div-scroll-border": `${null != background ? background : "transparent"}`,
         "--flex-div-scroll-handle": `${null != scrollHandle ? scrollHandle : "var(--scroll-bar)"}`,

package/dist/esm/chunks/{Grouper-CL5-Dk2U.mjs → Grouper-BPVjNabz.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";
 
@@ -13,19 +13,19 @@ import "../theme/colors.mjs";
 
 import "../theme/type.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 Badge } from "./Badge-DKkqjW28.mjs";
+import { B as Badge } from "./Badge-CHPL-h3Z.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css_header = "Grouper-module_header__D5fV0 flexBox-module_rowBetween__5FEvi", css_title = "Grouper-module_title__ZKqTP flexBox-module_rowBetween__5FEvi type-module_body-m-regular__LuQBA", css_content = "Grouper-module_content__Mof50 flexBox-module_rowBetween__5FEvi", css_icon = "Grouper-module_icon__14Jis flexBox-module_row__z24tF";
 

package/dist/esm/chunks/{Icon-h1sVmLvI.mjs → Icon-BlQAJ0NV.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";
 
@@ -11,15 +11,15 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { 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";