@apple-pie/slice 0.1.56 → 0.1.58

package/dist/esm/chunks/{IconButton-D9y0_8qs.mjs → IconButton-byqDhHLo.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,15 +7,17 @@ import { motion } from "motion/react";
 
 import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
 
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
+
 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 { T as ToolTipType } from "./sharedTypes-CmJ2hQtY.mjs";
+import { T as ToolTipType } from "./sharedTypes-BFgEbKnN.mjs";
 
 var AnimationPreset, AnimationType, css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
 
@@ -134,7 +136,7 @@ const presetAnimation = {
         "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
         "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,
         "--ib-button-size": `${null != size ? size : 0}px`,
-        "--ib-border-radius": round ? "100%" : `${null != borderRadius ? borderRadius : 0}px`,
+        "--ib-border-radius": round ? "100%" : setStyle(borderRadius, corners["corner-none"]),
         "--ib-border": border ? "1px" : 0,
         "--ib-color": textColor,
         "--ib-cursor": disabled ? "default" : "pointer"

package/dist/esm/chunks/{IndexedDB-DcKlcEts.mjs → IndexedDB-DUCWUJdN.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-CE_8mdQi.mjs";
+import { _ as __awaiter } from "./tslib.es6-CV__4jU7.mjs";
 
 class IndexedDB {
     constructor(storeName, options = {}) {

package/dist/esm/chunks/{Label-Cb1TNTGX.mjs → Label-DnHSkAZF.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 { 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";
 
@@ -80,7 +80,10 @@ function Label(props) {
           default:
             return "var(--core-surface-primary)";
         }
-    }, [ resolvedBackgroundColor, borderColor ]), setPadding = useMemo(() => padding ? setStyle(padding) : "2px 4px", [ padding ]), cssVars = useMemo(() => ({
+    }, [ resolvedBackgroundColor, borderColor ]), setPadding = useMemo(() => {
+        if (null != padding) return "number" == typeof padding ? `${padding}px` : padding;
+        return `var(--spacing-xxs) ${"xs" === textSize || "s" === textSize ? "var(--spacing-xs)" : "var(--spacing-s)"}`;
+    }, [ padding, textSize ]), cssVars = useMemo(() => ({
         "--label-padding": setPadding,
         "--label-border-radius": setStyle(borderRadius),
         "--label-cursor": onClick ? "pointer" : "default",

package/dist/esm/chunks/{Level-Ce3F5ITs.mjs → Level-CV1kvx1V.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,11 +7,11 @@ import React, { useRef, useState, useMemo, useEffect } from "react";
 
 import { corners } from "../theme/corners.mjs";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.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";
 
 var css_wrapper = "Level-module_wrapper__yOfXw", css_barContainer = "Level-module_barContainer__QMUdv", css_bar = "Level-module_bar__MnApX";
 

package/dist/esm/chunks/{Modal-uAJiitWq.mjs → Modal-CzxOSxwR.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,13 +7,13 @@ import React, { useRef, useState, useCallback, useMemo, useEffect } from "react"
 
 import { corners } from "../theme/corners.mjs";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.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: "Modal-module_wrapper__34Hds flexBox-module_columnBetween__ERfp7",
@@ -42,7 +42,7 @@ const Modal = React.memo(props => {
             if ("string" == typeof padding) {
                 return padding.split(" ")[0];
             }
-            return setStyle(padding, "16px");
+            return setStyle(padding, "var(--spacing-m)");
         }
         return "0";
     }, [ scrolls, padding, autoBorderBottom ]), cssVars = useMemo(() => ({
@@ -54,7 +54,7 @@ const Modal = React.memo(props => {
         "--modal-title-color": titleColor,
         "--modal-border-radius": setStyle(borderRadius),
         "--modal-border-width": setStyle(borderWidth),
-        "--modal-padding": setStyle(padding, "16px 24px"),
+        "--modal-padding": setStyle(padding, "var(--spacing-m) var(--spacing-l)"),
         "--modal-background-color": backgroundColor,
         "--modal-title-border-color": titleBorderColor,
         "--modal-title-border-width": setStyle(titleBorderWidth),

package/dist/esm/chunks/{ModalController-CviD29p4.mjs → ModalController-C6P18AFg.mjs}

@@ -5,15 +5,15 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef } 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 { O as Overlay } from "./Overlay-je9uxyF7.mjs";
+import { O as Overlay } from "./Overlay-CXGkHAtm.mjs";
 
-import { u as useModal, a as useModalActions } from "./modalStore-BsEzx_f6.mjs";
+import { u as useModal, a as useModalActions } from "./modalStore-BloNa5y6.mjs";
 
 var css_container = "ModalController-module_container__3cSaO", css_box = "ModalController-module_box__cPzOz", css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
 

package/dist/esm/chunks/{Overlay-je9uxyF7.mjs → Overlay-CXGkHAtm.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/{Pager-mEoJq77o.mjs → Pager-B5dbPb9x.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, { useState, useMemo, useEffect, useCallback } from "react";
 
-import { a as accessibleKeyDown } from "./misc-_71JTGbu.mjs";
+import { a as accessibleKeyDown } from "./misc-DtngeJIC.mjs";
 
 var css_wrapper = "Pager-module_wrapper__eutVg flexBox-module_row__z24tF", css_bullet = "Pager-module_bullet__TxyR5 flexBox-module_row__z24tF", css_selected = "Pager-module_selected__C6xbR";
 

package/dist/esm/chunks/{ProgressIndicator-CklbjFdQ.mjs → ProgressIndicator-DvrIrgxu.mjs}

@@ -9,19 +9,19 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as __rest } from "./tslib.es6-CE_8mdQi.mjs";
+import { a as __rest } from "./tslib.es6-CV__4jU7.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 { AnimatePresence, motion } from "motion/react";
 
@@ -67,7 +67,7 @@ const DoneCheck = React.memo(props => {
 var css_container = "ProgressIndicator-module_container__pW2gW flexBox-module_column__ezvMq";
 
 function ProgressIndicator(props) {
-    const theme = useTheme(), {size: size = 20, inset: inset = !0, secondsPerSpin: secondsPerSpin = 1, show: show = !1, color: color = theme.current.colors["core-icon-primary"], stroke: stroke = 1.5, inline: inline = !1, duration: duration, didStart: didStart = () => null, didStop: didStop = () => null} = props, divAttributes = __rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = useState(show), gradientId = useId().replace(/:/g, ""), timer = useRef(null);
+    const theme = useTheme(), {size: size = 20, inset: inset = !0, secondsPerSpin: secondsPerSpin = 1, show: show = !1, color: color = theme.current.colors["core-text-primary"], stroke: stroke = 1.5, inline: inline = !1, duration: duration, didStart: didStart = () => null, didStop: didStop = () => null} = props, divAttributes = __rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = useState(show), gradientId = useId().replace(/:/g, ""), timer = useRef(null);
     useEffect(() => (show ? (setPlaying(!0), didStart(), duration && (timer.current = setTimeout(() => {
         setPlaying(!1), didStop();
     }, 1e3 * duration))) : (setPlaying(!1), didStop()), () => {

package/dist/esm/chunks/{PromptInput-B93xY5vK.mjs → PromptInput-BAyomDiu.mjs}

@@ -11,30 +11,29 @@ import { corners } from "../theme/corners.mjs";
 
 import "../theme/type.mjs";
 
-import "./tslib.es6-CE_8mdQi.mjs";
+import "./tslib.es6-CV__4jU7.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 { F as FileList } from "./FileList-DYvUHXyd.mjs";
+import { F as FileList } from "./FileList-DeuwRbr1.mjs";
 
 var css = {
     wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
     bgRotate: "PromptInput-module_bgRotate__Um720",
     textareaWrapper: "PromptInput-module_textareaWrapper__KusiV flexBox-module_columnStart__C7P44",
     attachments: "PromptInput-module_attachments__rqgY1 flexBox-module_rowStart__4tcxS",
-    clear: "PromptInput-module_clear__MFroM flexBox-module_row__z24tF",
     buttonBar: "PromptInput-module_buttonBar__X8LDe flexBox-module_rowBetween__5FEvi",
     toolBar: "PromptInput-module_toolBar__GBvPT flexBox-module_rowStart__4tcxS",
     textarea: "PromptInput-module_textarea__e4Kxn",
@@ -93,7 +92,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
     }, [ focused ]), useEffect(() => {
         setTextValue(value);
     }, [ value ]);
-    const cssVars = useMemo(() => ({
+    const innerBorderRadius = useMemo(() => "number" == typeof borderRadius ? `${Math.max(borderRadius - 1, 0)}px` : `calc(${setStyle(borderRadius)} - 1px)`, [ borderRadius ]), cssVars = useMemo(() => ({
         "--prompt-width": setStyle(width),
         "--prompt-min-width": setStyle(minWidth, "unset"),
         "--prompt-max-width": setStyle(maxWidth, "unset"),
@@ -101,9 +100,9 @@ const PromptInputBase = React.forwardRef((props, ref) => {
         "--prompt-max-height": maxHeight ? `${maxHeight}px` : "unset",
         "--prompt-border-width": borderWidth ? `${borderWidth}px` : "0",
         "--prompt-state": working && borderAnimate ? "running" : "paused",
-        "--prompt-border-radius": borderRadius ? `${borderRadius}px` : "8px",
-        "--prompt-inner-border-radius": borderRadius ? borderRadius - 1 + "px" : "7px"
-    }), [ working, borderAnimate, setBorderColor, borderWidth, borderRadius, maxHeight, width, maxWidth, minWidth ]);
+        "--prompt-border-radius": setStyle(borderRadius),
+        "--prompt-inner-border-radius": innerBorderRadius
+    }), [ working, borderAnimate, setBorderColor, borderWidth, borderRadius, innerBorderRadius, maxHeight, width, maxWidth, minWidth ]);
     return jsx("div", {
         className: css.wrapperBg,
         ref: ref,

package/dist/esm/chunks/{RadioButton-n6q2k-ia.mjs → RadioButton-D6pFBLOS.mjs}

@@ -1,13 +1,13 @@
 '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, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
-import { I as Icon } from "./Icon-h1sVmLvI.mjs";
+import { I as Icon } from "./Icon-BlQAJ0NV.mjs";
 
 var css_wrapper = "RadioButton-module_wrapper__-pWRe flexBox-module_row__z24tF", css_radioIcon = "RadioButton-module_radioIcon__I27Xv flexBox-module_column__ezvMq", css_radioTitle = "RadioButton-module_radioTitle__zCQII flexBox-module_rowStart__4tcxS type-module_body-m-regular__LuQBA", css_radioContent = "RadioButton-module_radioContent__38xVx flexBox-module_columnStart__C7P44";
 
@@ -23,11 +23,11 @@ function RadioButtonComponent(props) {
     }, [ isSelected, deselect, onChange, fieldName, label, value ]), setAriaLabel = useMemo(() => label || (children && "string" == typeof children ? children : "Radio Button"), [ label, children ]), setIconColor = useMemo(() => iconColor || "var(--core-text-primary)", [ iconColor ]), iconName = useMemo(() => isSelected ? checkedIcon : icon, [ isSelected, checkedIcon, icon ]), setFlex = useMemo(() => list ? "unset" : wrap ? "40%" : "1", [ list, wrap ]), cssVars = useMemo(() => ({
         "--rb-max-width": wrap ? "50%" : "100%",
         "--rb-flex": setFlex,
-        "--rb-padding": noFrame ? "0" : "8px 16px 8px 10px",
+        "--rb-padding": noFrame ? "0" : hideRadio ? "var(--spacing-s) var(--spacing-m)" : "var(--spacing-s) var(--spacing-m) var(--spacing-s) calc(var(--spacing-m) - var(--spacing-xs))",
         "--rb-bg": !noFrame && isSelected ? "var(--core-surface-secondary)" : "transparent",
         "--rb-border": noFrame ? "none" : "1px solid var(--core-outline-primary)",
         "--rb-gap": setStyle(gap)
-    }), [ setFlex, isSelected, wrap, noFrame, gap ]);
+    }), [ setFlex, isSelected, wrap, noFrame, hideRadio, gap ]);
     return jsxs("button", Object.assign({
         id: divId,
         type: "button",

package/dist/esm/chunks/{RadioButtonList-CAJPqSTC.mjs → RadioButtonList-BpT9OaB1.mjs}

@@ -1,13 +1,13 @@
 '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, { useId, useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-_71JTGbu.mjs";
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
 
-import { R as RadioButton } from "./RadioButton-n6q2k-ia.mjs";
+import { R as RadioButton } from "./RadioButton-D6pFBLOS.mjs";
 
 var css_wrapper = "RadioButtonList-module_wrapper__wnq1-", css_column = "RadioButtonList-module_column__Bq16e flexBox-module_columnStart__C7P44", css_row = "RadioButtonList-module_row__D3szq flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{Slider-By-9skcp.mjs → Slider-5sz0qeXF.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";
 
@@ -9,17 +9,17 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { p as pointerPosition } from "./misc-_71JTGbu.mjs";
+import { p as pointerPosition } from "./misc-DtngeJIC.mjs";
 
-import { d as debounce } from "./debounce-B79xfyrw.mjs";
+import { d as debounce } from "./debounce-CuT6TUcG.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/Spacer-gFflabIn.mjs

@@ -0,0 +1,28 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CV__4jU7.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React, { useMemo } from "react";
+
+const Spacer = React.memo(props => {
+    const {size: size = "s"} = props, divAttributes = __rest(props, [ "size" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), spacerStyle = useMemo(() => {
+        const dimension = `var(--spacing-${size})`;
+        return {
+            width: dimension,
+            minWidth: dimension,
+            maxWidth: dimension,
+            height: dimension,
+            minHeight: dimension,
+            maxHeight: dimension,
+            flexShrink: 0
+        };
+    }, [ size ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "";
+    return jsx("div", Object.assign({
+        id: divId,
+        className: divClass.trim(),
+        style: Object.assign(Object.assign({}, divStyle), spacerStyle)
+    }, rest));
+});
+
+export { Spacer as S };

package/dist/esm/chunks/{Switch-DDyRtDnU.mjs → Switch-SXASJgaA.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";
 
@@ -10,7 +10,7 @@ import React, { useState, useEffect, useCallback, useMemo } from "react";
 var css_wrapper = "Switch-module_wrapper__kudO9 flexBox-module_row__z24tF", css_knob = "Switch-module_knob__vKNOc flexBox-module_row__z24tF";
 
 function SwitchComponent(props) {
-    const {fieldName: fieldName, state: state = !1, value: value, height: height = 22, width: width = 44, padding: padding = 3, backgroundColorOn: backgroundColorOn = "var(--feedback-positive)", backgroundColorOff: backgroundColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = useState(state), resolvedBackgroundColorOn = backgroundColorOn, resolvedBackgroundColorOff = backgroundColorOff;
+    const {fieldName: fieldName, state: state = !1, value: value, height: height = 22, width: width = 44, padding: padding, backgroundColorOn: backgroundColorOn = "var(--feedback-positive)", backgroundColorOff: backgroundColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = useState(state), resolvedBackgroundColorOn = backgroundColorOn, resolvedBackgroundColorOff = backgroundColorOff;
     useEffect(() => {
         setOn(state);
     }, [ state ]);
@@ -19,8 +19,8 @@ function SwitchComponent(props) {
     }, [ on, onChange, value ]), cssVars = useMemo(() => ({
         "--switch-width": `${width}px`,
         "--switch-height": `${height}px`,
-        "--switch-padding": `${padding}px`,
-        "--switch-knob-size": height - 2 * padding + "px",
+        "--switch-padding": void 0 === padding ? "var(--spacing-xxs)" : `${padding}px`,
+        "--switch-knob-size": "calc(var(--switch-height) - var(--switch-padding) * 2)",
         "--switch-knob-color": knobColor,
         "--switch-bg-color": on ? resolvedBackgroundColorOn : resolvedBackgroundColorOff
     }), [ width, height, padding, resolvedBackgroundColorOff, resolvedBackgroundColorOn, on, knobColor ]), justify = useMemo(() => ({

package/dist/esm/chunks/{TabBar-BushFhfl.mjs → TabBar-BIuiRmrm.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,25 +11,25 @@ import "../theme/colors.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 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";
 
-import { I as IconButton } from "./IconButton-D9y0_8qs.mjs";
+import { I as IconButton } from "./IconButton-byqDhHLo.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-CmJ2hQtY.mjs";
+import { T as ToolTipType } from "./sharedTypes-BFgEbKnN.mjs";
 
 var css = {
     wrapper: "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS",
@@ -53,7 +53,7 @@ const placeholderOptions = [ {
     value: "Option 2",
     icon: "moon full"
 } ], TabBar = React.memo(props => {
-    const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "fill", padding: padding = 8, iconFill: iconFill = !1, iconSize: iconSize = 20, iconGap: iconGap = 8, tabGap: tabGap = 0, disabled: disabled = !1, hasClose: hasClose = !1, closeWidth: closeWidth = "auto", selectedValue: selectedValue = null, justify: justify = "start", borderColor: borderColor = "var(--core-outline-secondary)", textSize: textSize = "m", onChange: onChange = () => null, onTabChange: onTabChange = () => null, onClose: onClose = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconFill", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "justify", "borderColor", "textSize", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected), optionRefs = useRef([]);
+    const {options: options = placeholderOptions, selected: selected = 0, border: border = !0, underline: underline = !0, height: height = "100%", width: width = "100%", tabWidth: tabWidth = "fill", padding: padding = "var(--spacing-s)", iconFill: iconFill = !1, iconSize: iconSize = 20, iconGap: iconGap = 8, tabGap: tabGap = 0, disabled: disabled = !1, hasClose: hasClose = !1, closeWidth: closeWidth = "auto", selectedValue: selectedValue = null, justify: justify = "start", borderColor: borderColor = "var(--core-outline-secondary)", textSize: textSize = "m", onChange: onChange = () => null, onTabChange: onTabChange = () => null, onClose: onClose = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconFill", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "justify", "borderColor", "textSize", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected), optionRefs = useRef([]);
     useEffect(() => {
         let selectedIndex = 0;
         selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
@@ -118,7 +118,7 @@ const placeholderOptions = [ {
         "--tab-bar-border-color": borderColor,
         "--tab-bar-justify": justify,
         "--tab-bar-close-width": `${closeWidth}px`,
-        "--tab-bar-close-padding": setStyle(padding, "8px")
+        "--tab-bar-close-padding": setStyle(padding, "var(--spacing-s)")
     }), [ tabGap, height, width, border, closeWidth, padding, borderColor, justify ]);
     return jsxs("div", Object.assign({
         id: divId,
@@ -145,7 +145,7 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = useTheme(), {name: name = "Option", index: index = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, toolTip: toolTip = null, underline: underline = !0, tabWidth: tabWidth = "fill", borderColor: borderColor = "var(--core-outline-secondary)", count: count = 0, iconFill: iconFill = !1, textSize: textSize = "m", onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
+    const theme = useTheme(), {name: name = "Option", index: index = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = "var(--spacing-s)", iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, toolTip: toolTip = null, underline: underline = !0, tabWidth: tabWidth = "fill", borderColor: borderColor = "var(--core-outline-secondary)", count: count = 0, iconFill: iconFill = !1, textSize: textSize = "m", onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
         if (onToolTip(null), toolTip && ref.current) {
             const tip = {
                 type: ToolTipType.button,
@@ -162,7 +162,7 @@ const Option = React.memo(props => {
     }, [ toolTip, onToolTip ]), textColor = useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = useMemo(() => "compact" === tabWidth ? "min-content" : "fill" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = useMemo(() => "fill" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = useMemo(() => ({
         "--tab-bar-option-border": setUnderline,
         "--tab-bar-option-border-color": borderColor,
-        "--tab-bar-option-padding": setStyle(padding, "8px"),
+        "--tab-bar-option-padding": setStyle(padding, "var(--spacing-s)"),
         "--tab-bar-option-icon-size": `${iconSize}px`,
         "--tab-bar-option-cursor": disabled ? "default" : "pointer",
         "--tab-bar-option-gap": `${null != iconGap ? iconGap : 0}px`,

package/dist/esm/chunks/{TextArea-BLum6rgj.mjs → TextArea-DbGoSQVo.mjs}

@@ -1,18 +1,20 @@
 '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, useRef, useCallback, useEffect, useMemo } from "react";
 
+import { s as setStyle } from "./misc-DtngeJIC.mjs";
+
 import { corners } from "../theme/corners.mjs";
 
-import { B as Button } from "./Button-Bq4xhoet.mjs";
+import { B as Button } from "./Button-YmXPZrPL.mjs";
 
 var css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0 scrollBars-module_scrollbars__c-ZPl", css_send = "TextArea-module_send__Cub13", css_xs = "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft", css_s = "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP", css_m = "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA", css_l = "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg";
 
 const TextArea = React.memo(props => {
-    const {value: value = "", name: name = "text_area", width: width = "100%", height: height = "auto", focused: focused = !1, placeholder: placeholder = "Enter text here...", rows: rows = 6, border: border = !0, borderRadius: borderRadius = corners["corner-xs"], padding: padding = "16px 4px 16px 16px", error: error = !1, resizable: resizable = !0, hasSend: hasSend = !1, sendOffset: sendOffset = {
+    const {value: value = "", name: name = "text_area", width: width = "100%", height: height = "auto", focused: focused = !1, placeholder: placeholder = "Enter text here...", rows: rows = 6, border: border = !0, borderRadius: borderRadius = corners["corner-xs"], padding: padding = "var(--spacing-m)", error: error = !1, resizable: resizable = !0, hasSend: hasSend = !1, sendOffset: sendOffset = {
         bottom: 10,
         right: 10
     }, sendSize: sendSize = 36, returnSubmits: returnSubmits = !1, backgroundColor: backgroundColor, minWidth: minWidth, textSize: textSize = "m", disabled: disabled = !1, submitClears: submitClears = !0, maxLength: maxLength, onChange: onChange = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onSubmit: onSubmit = () => null, onKeyDown: onKeyDown = () => null} = props, divAttributes = __rest(props, [ "value", "name", "width", "height", "focused", "placeholder", "rows", "border", "borderRadius", "padding", "error", "resizable", "hasSend", "sendOffset", "sendSize", "returnSubmits", "backgroundColor", "minWidth", "textSize", "disabled", "submitClears", "maxLength", "onChange", "onFocus", "onBlur", "onSubmit", "onKeyDown" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, [isFocused, setIsFocused] = useState(focused), [text, setText] = useState(value), ref = useRef(null), handleResize = useCallback(() => {
@@ -37,7 +39,7 @@ const TextArea = React.memo(props => {
         returnSubmits && "Enter" === e.key && (e.preventDefault(), e.stopPropagation(), 
         handleSubmit(void 0)), onKeyDown(e);
     }, [ returnSubmits, handleSubmit, onKeyDown ]), setStyleValue = useCallback(value => "string" == typeof value ? value : `${value}px`, []), setBorderColor = useMemo(() => border && isFocused ? "var(--core-link-primary)" : border && error ? "var(--feedback-warning)" : border ? "var(--core-outline-primary)" : "transparent", [ isFocused, error, border ]), textClassName = useMemo(() => "xs" === textSize ? css_xs : "l" === textSize ? css_l : "m" === textSize ? css_m : css_s, [ textSize ]), cssVars = useMemo(() => ({
-        "--ta-border-radius": `${borderRadius}px`,
+        "--ta-border-radius": setStyle(borderRadius),
         "--ta-width": `${setStyleValue(width)}`,
         "--ta-min-width": minWidth ? `${minWidth}px` : "unset",
         "--ta-height": `${setStyleValue(height)}`,