@apple-pie/slice 0.1.57 → 0.1.59

package/dist/cjs/chunks/{Modal-IDb_E4Uj.js → Modal-Dp5Wg1Bw.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-DzYz4zh5.js"), Button = require("./Button-C8hlMST5.js"), Icon = require("./Icon-aBLPfZrD.js"), IconButton = require("./IconButton-CbGXfBLK.js"), css = {
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-BallZ366.js"), Button = require("./Button-BjmkIu7l.js"), Icon = require("./Icon-BTjtQLNe.js"), IconButton = require("./IconButton-C0yNYhI6.js"), css = {
     wrapper: "Modal-module_wrapper__34Hds flexBox-module_columnBetween__ERfp7",
     title: "Modal-module_title__A5OeE flexBox-module_rowBetween__5FEvi",
     titleBlock: "Modal-module_titleBlock__HUepX flexBox-module_rowStart__4tcxS",
@@ -28,7 +28,7 @@ const Modal = React.memo(props => {
             if ("string" == typeof padding) {
                 return padding.split(" ")[0];
             }
-            return misc.setStyle(padding, "16px");
+            return misc.setStyle(padding, "var(--spacing-m)");
         }
         return "0";
     }, [ scrolls, padding, autoBorderBottom ]), cssVars = React.useMemo(() => ({
@@ -40,7 +40,7 @@ const Modal = React.memo(props => {
         "--modal-title-color": titleColor,
         "--modal-border-radius": misc.setStyle(borderRadius),
         "--modal-border-width": misc.setStyle(borderWidth),
-        "--modal-padding": misc.setStyle(padding, "16px 24px"),
+        "--modal-padding": misc.setStyle(padding, "var(--spacing-m) var(--spacing-l)"),
         "--modal-background-color": backgroundColor,
         "--modal-title-border-color": titleBorderColor,
         "--modal-title-border-width": misc.setStyle(titleBorderWidth),

package/dist/cjs/chunks/{ModalController-D0Rk-7xK.js → ModalController-Cb2_7DtS.js}

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
-require("./webRTCStore-CAt0Ly4R.js");
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
+require("./webRTCStore-BXHg9abP.js");
 
-var Overlay = require("./Overlay-CTRJWWlC.js"), modalStore = require("./modalStore-DwgyWAOV.js"), css_container = "ModalController-module_container__3cSaO", css_box = "ModalController-module_box__cPzOz", css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
+var Overlay = require("./Overlay-hOm9sYjr.js"), modalStore = require("./modalStore-BexwvT-T.js"), css_container = "ModalController-module_container__3cSaO", css_box = "ModalController-module_box__cPzOz", css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
 
 const defaultTransition = {
     ease: "easeOut",

package/dist/cjs/chunks/{Overlay-CTRJWWlC.js → Overlay-hOm9sYjr.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_overlay = "Overlay-module_overlay__EkbfA";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_overlay = "Overlay-module_overlay__EkbfA";
 
 const defaultTransition = {
     ease: "easeOut",

package/dist/cjs/chunks/{Pager-CjgU7xRP.js → Pager-CPhi9uyP.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DzYz4zh5.js"), 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";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BallZ366.js"), 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";
 
 const Pager = React.memo(props => {
     const {size: size = 8, index: index = 0, color: color, colorHover: colorHover, colorOn: colorOn, pages: pages = 2, gap: gap = 4, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "index", "color", "colorHover", "colorOn", "pages", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [selected, setSelected] = React.useState(index), bullets = React.useMemo(() => Array.from({

package/dist/cjs/chunks/{ProgressIndicator-Dn_SVbK5.js → ProgressIndicator-CMsc_Npc.js}

@@ -5,13 +5,13 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_u
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js");
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
-var Icon = require("./Icon-aBLPfZrD.js"), react = require("motion/react"), css$1_wrapper = "DoneCheck-module_wrapper__AlISD flexBox-module_row__z24tF", css$1_icon = "DoneCheck-module_icon__bKaFp flexBox-module_row__z24tF";
+var Icon = require("./Icon-BTjtQLNe.js"), react = require("motion/react"), css$1_wrapper = "DoneCheck-module_wrapper__AlISD flexBox-module_row__z24tF", css$1_icon = "DoneCheck-module_icon__bKaFp flexBox-module_row__z24tF";
 
 const DoneCheck = React.memo(props => {
     const theme = hooks_useTheme.useTheme(), {size: size = 88, stroke: stroke = 1.5, color: color = theme.current.colors["feedback-positive"], play: play = !0, delay: delay = 5, duration: duration = 1, didStart: didStart, didEnd: didEnd} = props, [playing, setPlaying] = React.useState(!play);
@@ -106,7 +106,7 @@ const OpenCircle = (size, secondsPerSpin, color, stroke = 1.5, playing = !1, ins
 };
 
 exports.DoneCheck = DoneCheck, exports.ProgressIndicator = function(props) {
-    const theme = hooks_useTheme.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 = tslib_es6.__rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = React.useState(show), gradientId = React.useId().replace(/:/g, ""), timer = React.useRef(null);
+    const theme = hooks_useTheme.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 = tslib_es6.__rest(props, [ "size", "inset", "secondsPerSpin", "show", "color", "stroke", "inline", "duration", "didStart", "didStop" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [playing, setPlaying] = React.useState(show), gradientId = React.useId().replace(/:/g, ""), timer = React.useRef(null);
     React.useEffect(() => (show ? (setPlaying(!0), didStart(), duration && (timer.current = setTimeout(() => {
         setPlaying(!1), didStop();
     }, 1e3 * duration))) : (setPlaying(!1), didStop()), () => {

package/dist/cjs/chunks/{PromptInput-DrqqeB7q.js → PromptInput-6eDiLG4g.js}

@@ -7,20 +7,19 @@ require("../theme/colors.js");
 
 var theme_corners = require("../theme/corners.js");
 
-require("../theme/type.js"), require("./tslib.es6-CxZHzsEo.js");
+require("../theme/type.js"), require("./tslib.es6-B2uEaXWi.js");
 
-var misc = require("./misc-DzYz4zh5.js");
+var misc = require("./misc-BallZ366.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
-var Button = require("./Button-C8hlMST5.js"), FileList = require("./FileList-CBR3uaXM.js"), css = {
+var Button = require("./Button-BjmkIu7l.js"), FileList = require("./FileList-6qXKA_Ux.js"), 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",
@@ -79,7 +78,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
     }, [ focused ]), React.useEffect(() => {
         setTextValue(value);
     }, [ value ]);
-    const cssVars = React.useMemo(() => ({
+    const innerBorderRadius = React.useMemo(() => "number" == typeof borderRadius ? `${Math.max(borderRadius - 1, 0)}px` : `calc(${misc.setStyle(borderRadius)} - 1px)`, [ borderRadius ]), cssVars = React.useMemo(() => ({
         "--prompt-width": misc.setStyle(width),
         "--prompt-min-width": misc.setStyle(minWidth, "unset"),
         "--prompt-max-width": misc.setStyle(maxWidth, "unset"),
@@ -87,9 +86,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": misc.setStyle(borderRadius),
+        "--prompt-inner-border-radius": innerBorderRadius
+    }), [ working, borderAnimate, setBorderColor, borderWidth, borderRadius, innerBorderRadius, maxHeight, width, maxWidth, minWidth ]);
     return jsxRuntime.jsx("div", {
         className: css.wrapperBg,
         ref: ref,

package/dist/cjs/chunks/{RadioButton-Bc7LvS17.js → RadioButton-DMxqwM6_.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DzYz4zh5.js"), Icon = require("./Icon-aBLPfZrD.js"), 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";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BallZ366.js"), Icon = require("./Icon-BTjtQLNe.js"), 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";
 
 function RadioButtonComponent(props) {
     const {label: label, children: children, fieldName: fieldName, value: value, selected: selected = !1, controlType: controlType = "radio", deselect: deselect = !0, tabIndex: tabIndex = 0, wrap: wrap = !1, list: list = !1, hideRadio: hideRadio = !1, noFrame: noFrame = !0, icon: icon = "circle", checkedIcon: checkedIcon = "check circle", iconColor: iconColor, gap: gap = 6, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "label", "children", "fieldName", "value", "selected", "controlType", "deselect", "tabIndex", "wrap", "list", "hideRadio", "noFrame", "icon", "checkedIcon", "iconColor", "gap", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isSelected, setIsSelected] = React.useState(selected);
@@ -15,11 +15,11 @@ function RadioButtonComponent(props) {
     }, [ isSelected, deselect, onChange, fieldName, label, value ]), setAriaLabel = React.useMemo(() => label || (children && "string" == typeof children ? children : "Radio Button"), [ label, children ]), setIconColor = React.useMemo(() => iconColor || "var(--core-text-primary)", [ iconColor ]), iconName = React.useMemo(() => isSelected ? checkedIcon : icon, [ isSelected, checkedIcon, icon ]), setFlex = React.useMemo(() => list ? "unset" : wrap ? "40%" : "1", [ list, wrap ]), cssVars = React.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": misc.setStyle(gap)
-    }), [ setFlex, isSelected, wrap, noFrame, gap ]);
+    }), [ setFlex, isSelected, wrap, noFrame, hideRadio, gap ]);
     return jsxRuntime.jsxs("button", Object.assign({
         id: divId,
         type: "button",

package/dist/cjs/chunks/{RadioButtonList-Bl6hPvsZ.js → RadioButtonList-kG_Y1d4X.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DzYz4zh5.js"), RadioButton = require("./RadioButton-Bc7LvS17.js"), 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";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BallZ366.js"), RadioButton = require("./RadioButton-DMxqwM6_.js"), 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";
 
 function RadioButtonListComponent(props) {
     const {width: width = "min-content", options: options = [], selectedIndexes: selectedIndexes = null, selectedOptions: selectedOptions = null, label: label = null, deselect: deselect = !1, multiSelect: multiSelect = !1, wrap: wrap = !1, tabIndexSeed: tabIndexSeed = 0, spacer: spacer = "none", custom: custom = 0, gap: gap = 16, hideRadio: hideRadio = !1, noFrame: noFrame = !0, toggleIcon: toggleIcon = !0, iconColor: iconColor, icon: icon = "circle", checkedIcon: checkedIcon = "check circle", iconSelectedColor: iconSelectedColor, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "width", "options", "selectedIndexes", "selectedOptions", "label", "deselect", "multiSelect", "wrap", "tabIndexSeed", "spacer", "custom", "gap", "hideRadio", "noFrame", "toggleIcon", "iconColor", "icon", "checkedIcon", "iconSelectedColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", labelId = React.useId(), [selected, setSelected] = React.useState(selectedIndexes);

package/dist/cjs/chunks/{Slider-BAR_f1bT.js → Slider-DGJomZGG.js}

@@ -1,14 +1,14 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var misc = require("./misc-DzYz4zh5.js"), debounce = require("./debounce-B1046f-_.js");
+var misc = require("./misc-BallZ366.js"), debounce = require("./debounce-Bi3gt_i6.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
 var hooks_useObserveResize = require("../hooks/useObserveResize.js"), css_wrapper = "Slider-module_wrapper__KCCs1", css_trackBg = "Slider-module_trackBg__7zfqm flexBox-module_rowStart__4tcxS", css_track = "Slider-module_track__kaJkL flexBox-module_rowStart__4tcxS", css_trackHead = "Slider-module_trackHead__W-UdG", css_trackWrapper = "Slider-module_trackWrapper__Ot0Wh flexBox-module_rowStart__4tcxS";

package/dist/cjs/chunks/Spacer-Z97EoNtJ.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
+
+const Spacer = React.memo(props => {
+    const {size: size = "s"} = props, divAttributes = tslib_es6.__rest(props, [ "size" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), spacerStyle = React.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 jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: divClass.trim(),
+        style: Object.assign(Object.assign({}, divStyle), spacerStyle)
+    }, rest));
+});
+
+exports.Spacer = Spacer;

package/dist/cjs/chunks/{Switch-CuK0xq85.js → Switch-CfzJd19R.js}

@@ -1,10 +1,10 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_wrapper = "Switch-module_wrapper__kudO9 flexBox-module_row__z24tF", css_knob = "Switch-module_knob__vKNOc flexBox-module_row__z24tF";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), 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 = tslib_es6.__rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = React.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 = tslib_es6.__rest(props, [ "fieldName", "state", "value", "height", "width", "padding", "backgroundColorOn", "backgroundColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = React.useState(state), resolvedBackgroundColorOn = backgroundColorOn, resolvedBackgroundColorOff = backgroundColorOff;
     React.useEffect(() => {
         setOn(state);
     }, [ state ]);
@@ -13,8 +13,8 @@ function SwitchComponent(props) {
     }, [ on, onChange, value ]), cssVars = React.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 = React.useMemo(() => ({

package/dist/cjs/chunks/{TabBar-DE-0fmd_.js → TabBar-C2aNS0Sd.js}

@@ -1,17 +1,17 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js"), require("../theme/type.js");
 
-var misc = require("./misc-DzYz4zh5.js");
+var misc = require("./misc-BallZ366.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
-var Badge = require("./Badge-C_sva3jT.js"), Icon = require("./Icon-aBLPfZrD.js"), IconButton = require("./IconButton-CbGXfBLK.js"), sharedTypes = require("./sharedTypes-CKKHnYKP.js"), css = {
+var Badge = require("./Badge-DMey3Pf3.js"), Icon = require("./Icon-BTjtQLNe.js"), IconButton = require("./IconButton-C0yNYhI6.js"), sharedTypes = require("./sharedTypes-XAbs742N.js"), css = {
     wrapper: "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS",
     option: "TabBar-module_option__gYjDf flexBox-module_row__z24tF",
     icon: "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF",
@@ -33,7 +33,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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = React.useState(selected), optionRefs = React.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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = React.useState(selected), optionRefs = React.useRef([]);
     React.useEffect(() => {
         let selectedIndex = 0;
         selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
@@ -98,7 +98,7 @@ const placeholderOptions = [ {
         "--tab-bar-border-color": borderColor,
         "--tab-bar-justify": justify,
         "--tab-bar-close-width": `${closeWidth}px`,
-        "--tab-bar-close-padding": misc.setStyle(padding, "8px")
+        "--tab-bar-close-padding": misc.setStyle(padding, "var(--spacing-s)")
     }), [ tabGap, height, width, border, closeWidth, padding, borderColor, justify ]);
     return jsxRuntime.jsxs("div", Object.assign({
         id: divId,
@@ -125,7 +125,7 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = hooks_useTheme.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 = React.useRef(null), strokeColor = React.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 = React.useCallback(e => {
+    const theme = hooks_useTheme.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 = React.useRef(null), strokeColor = React.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 = React.useCallback(e => {
         if (onToolTip(null), toolTip && ref.current) {
             const tip = {
                 type: sharedTypes.ToolTipType.button,
@@ -142,7 +142,7 @@ const Option = React.memo(props => {
     }, [ toolTip, onToolTip ]), textColor = React.useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = React.useMemo(() => "compact" === tabWidth ? "min-content" : "fill" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = React.useMemo(() => "fill" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = React.useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = React.useMemo(() => ({
         "--tab-bar-option-border": setUnderline,
         "--tab-bar-option-border-color": borderColor,
-        "--tab-bar-option-padding": misc.setStyle(padding, "8px"),
+        "--tab-bar-option-padding": misc.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/cjs/chunks/{TextArea-CTDhSMbI.js → TextArea-G_MUJAHw.js}

@@ -1,10 +1,10 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), Button = require("./Button-C8hlMST5.js"), 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";
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BallZ366.js"), theme_corners = require("../theme/corners.js"), Button = require("./Button-BjmkIu7l.js"), 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 = theme_corners.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 = theme_corners.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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = backgroundColor, [isFocused, setIsFocused] = React.useState(focused), [text, setText] = React.useState(value), ref = React.useRef(null), handleResize = React.useCallback(() => {
@@ -29,7 +29,7 @@ const TextArea = React.memo(props => {
         returnSubmits && "Enter" === e.key && (e.preventDefault(), e.stopPropagation(), 
         handleSubmit(void 0)), onKeyDown(e);
     }, [ returnSubmits, handleSubmit, onKeyDown ]), setStyleValue = React.useCallback(value => "string" == typeof value ? value : `${value}px`, []), setBorderColor = React.useMemo(() => border && isFocused ? "var(--core-link-primary)" : border && error ? "var(--feedback-warning)" : border ? "var(--core-outline-primary)" : "transparent", [ isFocused, error, border ]), textClassName = React.useMemo(() => "xs" === textSize ? css_xs : "l" === textSize ? css_l : "m" === textSize ? css_m : css_s, [ textSize ]), cssVars = React.useMemo(() => ({
-        "--ta-border-radius": `${borderRadius}px`,
+        "--ta-border-radius": misc.setStyle(borderRadius),
         "--ta-width": `${setStyleValue(width)}`,
         "--ta-min-width": minWidth ? `${minWidth}px` : "unset",
         "--ta-height": `${setStyleValue(height)}`,

package/dist/cjs/chunks/{TextField-BocVz2FD.js → TextField-CWIGERkd.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
@@ -9,13 +9,13 @@ var theme_corners = require("../theme/corners.js");
 
 require("../theme/type.js");
 
-var misc = require("./misc-DzYz4zh5.js");
+var misc = require("./misc-BallZ366.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
-var Button = require("./Button-C8hlMST5.js"), Icon = require("./Icon-aBLPfZrD.js"), IconButton = require("./IconButton-CbGXfBLK.js"), css = {
+var Button = require("./Button-BjmkIu7l.js"), Icon = require("./Icon-BTjtQLNe.js"), IconButton = require("./IconButton-C0yNYhI6.js"), css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",
     container: "TextField-module_container__5U9yK flexBox-module_rowStart__4tcxS",
     label: "TextField-module_label__jD8MR flexBox-module_rowStart__4tcxS",
@@ -85,21 +85,16 @@ const MOTION_CONFIG = {
     } : void 0, [ clearButton ]), setBackgroundColor = React.useMemo(() => inline ? "unset" : isFocused ? null != backgroundColorFocused ? backgroundColorFocused : "transparent" : null != backgroundColorBlurred ? backgroundColorBlurred : "transparent", [ inline, isFocused, backgroundColorFocused, backgroundColorBlurred ]), setBorderColor = React.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 = React.useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = React.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 = React.useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = React.useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), setPaddingRight = React.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 = React.useMemo(() => ({
+    }, [ borderType, error, isFocused, borderColorError, borderColorFocused, borderColorBlurred ]), setBoxShadow = React.useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = React.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 = React.useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = React.useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), resolvedPadding = React.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 = React.useMemo(() => ({
         "--tf-input-width": "unset" !== size.width && "100%",
         "--tf-field-size": "auto" === size.width ? "content" : "unset",
         "--tf-width": misc.setStyle(size.width),
         "--tf-height": misc.setStyle(size.height),
-        "--tf-padding": misc.setStyle(padding, "8px 10px"),
-        "--tf-padding-right": `${setPaddingRight}px`,
+        "--tf-padding": resolvedPadding,
         "--tf-padding-label-left": "" === label ? "unset" : "0",
         "--tf-border-radius": misc.setStyle(borderRadius),
         "--tf-bg-color": setBackgroundColor,
@@ -109,7 +104,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 jsxRuntime.jsxs("div", Object.assign({
         id: divId,
         className: `${css.wrapper}${divClass}`,
@@ -190,6 +185,6 @@ 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", exports.TextField = TextField;

package/dist/cjs/chunks/{Tip-C7hgfkbD.js → Tip-B7RF879X.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-DzYz4zh5.js"), theme_corners = require("../theme/corners.js"), css = {
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BallZ366.js"), theme_corners = require("../theme/corners.js"), css = {
     wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",
     xs: "Tip-module_xs__wsz9y type-module_body-xs-regular__ZAFft",
     s: "Tip-module_s__Wvz3q type-module_body-s-regular__vRHSP",
@@ -41,11 +41,11 @@ const tipBasePos = {
         };
     }, [ coords, showDelay, hideDelay ]), React.useEffect(() => setAnimate(ready), [ ready ]);
     const cssVars = React.useMemo(() => ({
-        "--tooltip-padding": null != padding ? padding : "3px 6px",
+        "--tooltip-padding": 0 === padding ? "0px" : misc.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 : `${theme_corners.corners["corner-xs"]}px`
+        "--tooltip-border-radius": misc.setStyle(resolvedBorderRadius, theme_corners.corners["corner-xs"])
     }), [ padding, resolvedBackgroundColor, resolvedTextColor, border, borderColor, resolvedBorderRadius ]), coordStyle = React.useMemo(() => {
         const {left: left, top: top} = pos;
         return {

package/dist/cjs/chunks/{Toast-CUtUp1H3.js → Toast-pkSkNuZo.js}

@@ -1,17 +1,21 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CxZHzsEo.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-B2uEaXWi.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("../theme/type.js");
+require("../theme/colors.js");
 
-var misc = require("./misc-DzYz4zh5.js");
+var theme_corners = require("../theme/corners.js");
 
-require("./broadcastChannel-Bf-u0RnC.js"), require("./webRTCStore-CAt0Ly4R.js"), 
-require("./microphoneStore-D0ussh7L.js"), require("./volumeStore-Dez02JPh.js"), 
+require("../theme/type.js");
+
+var misc = require("./misc-BallZ366.js");
+
+require("./broadcastChannel-DLSijpj_.js"), require("./webRTCStore-BXHg9abP.js"), 
+require("./microphoneStore-DljI0Zpj.js"), require("./volumeStore-DzgmrI6q.js"), 
 require("../hooks/useWindow.js");
 
-var ToastType, Icon = require("./Icon-aBLPfZrD.js"), ProgressIndicator = require("./ProgressIndicator-Dn_SVbK5.js"), css = {
+var ToastType, Icon = require("./Icon-BTjtQLNe.js"), ProgressIndicator = require("./ProgressIndicator-CMsc_Npc.js"), css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",
     close: "Toast-module_close__i10-s flexBox-module_row__z24tF",
     message: "Toast-module_message__3dP0P flexBox-module_rowStart__4tcxS",
@@ -27,7 +31,7 @@ exports.ToastType = void 0, (ToastType = exports.ToastType || (exports.ToastType
 ToastType.Error = "error", ToastType.Warning = "warning", ToastType.Info = "info";
 
 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 = exports.ToastType.Info, didHide: didHide = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "notifId", "message", "textSize", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = hooks_useTheme.useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = React.useState(!1), [content, setContent] = React.useState(null), timer = React.useRef(null);
+    const {notifId: notifId, message: message = null, textSize: textSize = "m", border: border = !0, padding: padding, radius: radius = theme_corners.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 = exports.ToastType.Info, didHide: didHide = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "notifId", "message", "textSize", "border", "padding", "radius", "container", "showDelay", "duration", "position", "offset", "close", "progress", "type", "didHide" ]), theme = hooks_useTheme.useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = React.useState(!1), [content, setContent] = React.useState(null), timer = React.useRef(null);
     React.useEffect(() => {
         timer.current && clearTimeout(timer.current);
         return message && message.length > 0 ? timer.current = setTimeout(() => {
@@ -38,7 +42,7 @@ const ToastBase = React.forwardRef((props, ref) => {
             timer.current && clearTimeout(timer.current);
         };
     }, [ message, showDelay, duration ]), React.useEffect(() => setReady(null !== content), [ content ]);
-    const defaultPadding = React.useMemo(() => close ? "10px 12px 10px 16px" : "10px 16px", [ close ]), colorScheme = React.useMemo(() => {
+    const defaultPadding = React.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 = React.useMemo(() => {
         switch (type) {
           case "success":
             return {
@@ -69,11 +73,11 @@ const ToastBase = React.forwardRef((props, ref) => {
             };
         }
     }, [ type ]), cssVars = React.useMemo(() => ({
-        "--toast-padding": misc.setStyle(padding, defaultPadding),
+        "--toast-padding": 0 === padding ? "0px" : misc.setStyle(padding, defaultPadding),
         "--toast-background": colorScheme.bg,
         "--toast-color": colorScheme.text,
         "--toast-border": border ? `1px solid ${colorScheme.border}` : "unset",
-        "--toast-border-radius": misc.setStyle(radius, 4),
+        "--toast-border-radius": misc.setStyle(radius, theme_corners.corners["corner-xs"]),
         "--toast-position": "window" === container ? "fixed" : "absolute"
     }), [ padding, border, colorScheme, radius, defaultPadding, container ]), variants = React.useMemo(() => {
         const positionShow = "bottom" === position ? {

package/dist/cjs/chunks/{ToggleButton-BEw8y4n6.js → ToggleButton-DPc2x2EV.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-CbGXfBLK.js"), Label = require("./Label-Coei_F3_.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), IconButton = require("./IconButton-C0yNYhI6.js"), Label = require("./Label-DsMFZd91.js"), css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 
 exports.ToggleButton = function(props) {
     const {label: label, textSize: textSize, icon: icon, iconOn: iconOn, selected: selected = !1, iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-surface-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-secondary)", backgroundColorOn: backgroundColorOn = "var(--core-text-special)", iconSize: iconSize = 20, buttonSize: buttonSize = "m", tooltip: tooltip, gap: gap = 4, unselect: unselect = !0, fill: fill = !1, disabled: disabled = !1, border: border = !1, onChange: onChange, onSelect: onSelect, onToolTip: onToolTip, children: children, presetAnimations: presetAnimations, customAnimations: customAnimations} = props, handleClick = () => {

package/dist/cjs/chunks/{UploadArea-cmzfjkdq.js → UploadArea-DyVGwChS.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-DzYz4zh5.js"), Icon = require("./Icon-aBLPfZrD.js"), ProgressIndicator = require("./ProgressIndicator-Dn_SVbK5.js"), FileList = require("./FileList-CBR3uaXM.js"), css = {
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-BallZ366.js"), FileList = require("./FileList-6qXKA_Ux.js"), Icon = require("./Icon-BTjtQLNe.js"), ProgressIndicator = require("./ProgressIndicator-CMsc_Npc.js"), css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",
     icon: "UploadArea-module_icon__M7n-m flexBox-module_row__z24tF",
     title: "UploadArea-module_title__VbNGq type-module_body-l-bold__Fh2dt",
@@ -24,7 +24,7 @@ var FileTypes;
 }(FileTypes || (FileTypes = {}));
 
 const UploadAreaBase = React.forwardRef((props, ref) => {
-    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth, border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius, radius: radius = theme_corners.corners["corner-m"], padding: padding = 32, backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = React.useState(!1), inputRef = React.useRef(null), dragDepth = React.useRef(0), inputId = React.useId(), titleId = React.useId(), messageId = React.useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, handleClickUpload = React.useCallback(() => {
+    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", borderWidth: borderWidth, border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", borderRadius: borderRadius, radius: radius = theme_corners.corners["corner-m"], padding: padding = "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] = React.useState(!1), inputRef = React.useRef(null), dragDepth = React.useRef(0), inputId = React.useId(), titleId = React.useId(), messageId = React.useId(), isInteractive = !busy && files.length < 1, resolvedBorderWidth = null != borderWidth ? borderWidth : border, resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = backgroundColor, resolvedBackgroundColorHover = backgroundColorHover, handleClickUpload = React.useCallback(() => {
         var _a;
         isInteractive && (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
         null === (_a = inputRef.current) || void 0 === _a || _a.click());
@@ -48,7 +48,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": misc.setStyle(resolvedBorderRadius),
         "--ua-padding": misc.setStyle(padding),
         "--ua-bg-color": hovered ? resolvedBackgroundColorHover : resolvedBackgroundColor,
         "--ua-icon-size": `${iconSize}px`,
@@ -103,7 +103,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
             })
         }), jsxRuntime.jsx("input", {