@apple-pie/slice 0.1.51 → 0.1.53

package/dist/esm/chunks/{Modal-C1g7ceSt.mjs → Modal-DAU9VnrP.mjs}

@@ -1,17 +1,19 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { B as Button } from "./Button-Bvgo8DRW.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { B as Button } from "./Button-BYALDfuE.mjs";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
+
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
 var css = {
     wrapper: "Modal-module_wrapper__34Hds flexBox-module_columnBetween__ERfp7",
@@ -31,7 +33,7 @@ var css = {
 };
 
 const Modal = React.memo(props => {
-    const {children: children, id: id, className: className, style: style, minWidth: minWidth = 300, minHeight: minHeight = 200, maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, titleSize: titleSize = "l", contentSize: contentSize = "m", actions: actions, titleIcon: titleIcon, titleIconFill: titleIconFill = !0, titleBorderColor: titleBorderColor = "var(--core-outline-primary)", titleBorderWidth: titleBorderWidth = 0, actionsBorderColor: actionsBorderColor = "var(--core-outline-primary)", actionsBorderWidth: actionsBorderWidth = 0, autoBorderBottom: autoBorderBottom = !0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", scrollHandleColor: scrollHandleColor = "var(--core-text-disabled)", scrollHandleColorHover: scrollHandleColorHover = "var(--core-text-disabled)", titleColor: titleColor = "var(--core-text-special)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = 8, borderWidth: borderWidth = 1} = props, rest = __rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleSize", "contentSize", "actions", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "autoBorderBottom", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "scrollHandleColor", "scrollHandleColorHover", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), contentWrapperRef = useRef(null), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", [scrolls, setScrolls] = useState(!1), getScrolls = useCallback(() => {
+    const {children: children, id: id, className: className, style: style, minWidth: minWidth = 300, minHeight: minHeight = 200, maxHeight: maxHeight = 400, maxWidth: maxWidth = 400, padding: padding, close: close = !0, title: title, titleTextSize: titleTextSize = "l", contentTextSize: contentTextSize = "m", actions: actions, titleIcon: titleIcon, titleIconFill: titleIconFill = !0, titleBorderColor: titleBorderColor = "var(--core-outline-primary)", titleBorderWidth: titleBorderWidth = 0, actionsBorderColor: actionsBorderColor = "var(--core-outline-primary)", actionsBorderWidth: actionsBorderWidth = 0, autoBorderBottom: autoBorderBottom = !0, onAction: onAction, onReject: onReject, onResolve: onResolve, onClose: onClose, onToolTip: onToolTip, onDragPointerDown: onDragPointerDown, backgroundColor: backgroundColor = "var(--core-surface-secondary)", scrollHandleColor: scrollHandleColor = "var(--core-text-disabled)", scrollHandleColorHover: scrollHandleColorHover = "var(--core-text-disabled)", titleColor: titleColor = "var(--core-text-special)", borderColor: borderColor = "var(--core-outline-primary)", borderRadius: borderRadius = corners["corner-m"], borderWidth: borderWidth = 1} = props, rest = __rest(props, [ "children", "id", "className", "style", "minWidth", "minHeight", "maxHeight", "maxWidth", "padding", "close", "title", "titleTextSize", "contentTextSize", "actions", "titleIcon", "titleIconFill", "titleBorderColor", "titleBorderWidth", "actionsBorderColor", "actionsBorderWidth", "autoBorderBottom", "onAction", "onReject", "onResolve", "onClose", "onToolTip", "onDragPointerDown", "backgroundColor", "scrollHandleColor", "scrollHandleColorHover", "titleColor", "borderColor", "borderRadius", "borderWidth" ]), contentWrapperRef = useRef(null), modalStyle = null != style ? style : {}, modalClass = className ? ` ${className}` : "", [scrolls, setScrolls] = useState(!1), getScrolls = useCallback(() => {
         var _a, _b;
         const height = null === (_a = contentWrapperRef.current) || void 0 === _a ? void 0 : _a.offsetHeight, scrollHeight = null === (_b = contentWrapperRef.current) || void 0 === _b ? void 0 : _b.scrollHeight;
         return !(!height || !scrollHeight) && height < scrollHeight;
@@ -87,7 +89,7 @@ const Modal = React.memo(props => {
         style: Object.assign(Object.assign({}, modalStyle), cssVars)
     }, rest, {
         children: [ (title || close) && jsxs("div", {
-            className: `${css.title} ${css[titleSize]}`,
+            className: `${css.title} ${css[titleTextSize]}`,
             onPointerDown: onDragPointerDown,
             children: [ jsxs("div", {
                 className: css.titleBlock,
@@ -105,6 +107,7 @@ const Modal = React.memo(props => {
                     className: css.titleIcon,
                     children: jsx(IconButton, {
                         tooltip: "close",
+                        "aria-label": "close",
                         icon: "x",
                         onClick: () => {
                             null == onReject || onReject(new Error("Modal was closed", {
@@ -119,7 +122,7 @@ const Modal = React.memo(props => {
             className: css.contentWrapper,
             ref: contentWrapperRef,
             children: jsx("div", {
-                className: `${css.content} ${css[contentSize]}`,
+                className: `${css.content} ${css[contentTextSize]}`,
                 children: children
             })
         }), actions && actions.length > 0 && jsxs("div", {

package/dist/esm/chunks/{ModalController-CkPCQeYU.mjs → ModalController-axF12LqY.mjs}

@@ -5,15 +5,15 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef } from "react";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import { O as Overlay } from "./Overlay-CZxlviV2.mjs";
+import { O as Overlay } from "./Overlay-CYvVXNU5.mjs";
 
-import { u as useModal, a as useModalActions } from "./modalStore-CC-D_muU.mjs";
+import { u as useModal, a as useModalActions } from "./modalStore-CBW78_cT.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-CZxlviV2.mjs → Overlay-CYvVXNU5.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -13,7 +13,7 @@ const defaultTransition = {
     ease: "easeOut",
     duration: .25
 }, Overlay = React.memo(props => {
-    const {children: children, show: show = !1, type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity = 0, transition: transition = defaultTransition, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
+    const {children: children, show: show = !1, type: type = "clear", global: global = !1, overlay: overlay, color: color = "rgb(0,0,0)", opacity: opacity, transition: transition = defaultTransition, onClick: onClick = () => null, toggleOverlay: toggleOverlay = () => null} = props, divAttributes = __rest(props, [ "children", "show", "type", "global", "overlay", "color", "opacity", "transition", "onClick", "toggleOverlay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", computedOpacity = useMemo(() => "clear" === type ? 0 : void 0 !== opacity ? opacity : "dark" === type ? .8 : 0, [ type, opacity ]), handleClick = useCallback(() => {
         global && toggleOverlay(!1), onClick();
     }, [ global, toggleOverlay, onClick ]), handleContextMenu = useCallback(e => {
         e.preventDefault();

package/dist/esm/chunks/{Pager-aLZXhX_w.mjs → Pager-BvFWzAok.mjs}

@@ -1,11 +1,11 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 
-import { a as accessibleKeyDown } from "./misc-CV0SS-jF.mjs";
+import { a as accessibleKeyDown } from "./misc-O5ZSVDP0.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-CGbLu2wM.mjs → ProgressIndicator-CNTW0t8s.mjs}

@@ -9,19 +9,19 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
 import { AnimatePresence, motion } from "motion/react";
 

package/dist/esm/chunks/{PromptInput-rsGyHTJb.mjs → PromptInput-PJIXJMCp.mjs}

@@ -7,25 +7,27 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
+import { corners } from "../theme/corners.mjs";
+
 import "../theme/type.mjs";
 
-import "./tslib.es6-p9eD9VLE.mjs";
+import "./tslib.es6-uJhEruZV.mjs";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-Bvgo8DRW.mjs";
+import { B as Button } from "./Button-BYALDfuE.mjs";
 
-import { F as FileList } from "./FileList-Dt5V9YPs.mjs";
+import { F as FileList } from "./FileList-CK96tECm.mjs";
 
 var css = {
     wrapperBg: "PromptInput-module_wrapperBg__zabZq flexBox-module_columnStart__C7P44",
@@ -36,13 +38,15 @@ var css = {
     buttonBar: "PromptInput-module_buttonBar__X8LDe flexBox-module_rowBetween__5FEvi",
     toolBar: "PromptInput-module_toolBar__GBvPT flexBox-module_rowStart__4tcxS",
     textarea: "PromptInput-module_textarea__e4Kxn",
+    xs: "PromptInput-module_xs__Oy1ZT type-module_body-xs-regular__ZAFft",
     s: "PromptInput-module_s__ivyC9 type-module_body-s-regular__vRHSP",
     m: "PromptInput-module_m__LFHvW type-module_body-m-regular__LuQBA",
-    l: "PromptInput-module_l__TlceW type-module_body-l-regular__lOYbg"
+    l: "PromptInput-module_l__TlceW type-module_body-l-regular__lOYbg",
+    xl: "PromptInput-module_xl__FbITb type-module_body-xl-regular__pF2kC"
 };
 
 const PromptInputBase = React.forwardRef((props, ref) => {
-    const {children: children, attachments: attachments = [], value: value = "", width: width = "100%", maxWidth: maxWidth, minWidth: minWidth, working: working = !1, maxHeight: maxHeight, attachmentsDisabled: attachmentsDisabled = !1, submitWorking: submitWorking = !1, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = 8, focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = useTheme(), [isFocused, setIsFocused] = useState(null != focused && focused), [textValue, setTextValue] = useState(value), textAreaRef = useRef(null), handleFocus = useCallback(() => {
+    const {children: children, attachments: attachments = [], value: value = "", width: width = "100%", maxWidth: maxWidth, minWidth: minWidth, working: working = !1, maxHeight: maxHeight, attachmentsDisabled: attachmentsDisabled = !1, submitWorking: submitWorking = !1, borderStyle: borderStyle = "gradient", borderColor: borderColor, borderColorOn: borderColorOn, borderAnimate: borderAnimate = !0, borderWidth: borderWidth = 1, borderRadius: borderRadius = corners["corner-m"], focused: focused = !1, placeholder: placeholder = "Ask me anything ...", placeholderWorking: placeholderWorking = "Working ...", submitClears: submitClears = !0, enterSubmits: enterSubmits = !0, attachButton: attachButton = !0, sendButton: sendButton = !0, stopEnabled: stopEnabled = !1, textSize: textSize = "m", maxLength: maxLength, toolbarGap: toolbarGap = 8, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, onStop: onStop, onAttachmentsChange: onAttachmentsChange} = props, {isDark: isDark} = useTheme(), [isFocused, setIsFocused] = useState(null != focused && focused), [textValue, setTextValue] = useState(value), textAreaRef = useRef(null), handleFocus = useCallback(() => {
         var _a, _b;
         setIsFocused(!0), null === (_a = null == textAreaRef ? void 0 : textAreaRef.current) || void 0 === _a || _a.focus(), 
         null == onFocus || onFocus(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
@@ -111,8 +115,8 @@ const PromptInputBase = React.forwardRef((props, ref) => {
                 children: jsx(FileList, {
                     files: attachments,
                     onChange: handleAttachmentsChange,
-                    bgColor: "var(--core-surface-primary)",
-                    size: "s",
+                    backgroundColor: "var(--core-surface-primary)",
+                    textSize: "s",
                     direction: "row",
                     gap: 8,
                     iconSize: 24
@@ -154,7 +158,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
                     iconLeft: stopEnabled ? "stop" : "arrow up",
                     iconSize: stopEnabled ? 16 : 20,
                     state: sendButtonState,
-                    bgColorDisabled: "var(--core-outline-primary)",
+                    backgroundColorDisabled: "var(--core-outline-primary)",
                     progress: !stopEnabled,
                     working: submitWorking && working,
                     onMouseDown: handleClickSend,

package/dist/esm/chunks/{RadioButton-DPKvT5yo.mjs → RadioButton-DipoEV9R.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.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";
 

package/dist/esm/chunks/{RadioButtonList-Brl_h2Nx.mjs → RadioButtonList-CDysnTjd.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
 import React, { useId, useState, useEffect, useCallback, useMemo } from "react";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import { R as RadioButton } from "./RadioButton-DPKvT5yo.mjs";
+import { R as RadioButton } from "./RadioButton-DipoEV9R.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-BJ9mifdr.mjs → Slider-BzX_jQ27.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -9,17 +9,17 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { p as pointerPosition } from "./misc-CV0SS-jF.mjs";
+import { p as pointerPosition } from "./misc-O5ZSVDP0.mjs";
 
-import { d as debounce } from "./debounce-BXeBit77.mjs";
+import { d as debounce } from "./debounce-O12UHVJH.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 

package/dist/esm/chunks/{Spacer-pZIEZfkL.mjs → Spacer-DJKkJpdX.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/chunks/{Switch-Cbl6iesb.mjs → Switch-C8FXGMlJ.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } 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, backgroundColorOff: backgroundColorOff, bgColorOn: bgColorOn = "var(--feedback-positive)", bgColorOff: bgColorOff = "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", "bgColorOn", "bgColorOff", "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 = null != backgroundColorOn ? backgroundColorOn : bgColorOn, resolvedBackgroundColorOff = null != backgroundColorOff ? backgroundColorOff : bgColorOff;
+    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;
     useEffect(() => {
         setOn(state);
     }, [ state ]);

package/dist/esm/chunks/{TabBar-b8Dqmz0l.mjs → TabBar-B_pwLZcy.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -11,25 +11,25 @@ import "../theme/colors.mjs";
 
 import "../theme/type.mjs";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Badge } from "./Badge-C6kNwu4r.mjs";
+import { B as Badge } from "./Badge-DIru-w6O.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
-import { T as ToolTipType } from "./sharedTypes-h1aSeCm2.mjs";
+import { T as ToolTipType } from "./sharedTypes-ySBopm8X.mjs";
 
 var css = {
     wrapper: "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS",
@@ -89,9 +89,9 @@ const placeholderOptions = [ {
         }
         null !== nextIndex && (event.preventDefault(), handleOptionClick(nextIndex), focusOption(nextIndex));
     }, [ options.length, handleOptionClick, focusOption ]), renderedOptions = useMemo(() => options.map((option, i) => jsx(Option, {
-        label: option.name,
-        value: i,
-        showToolTip: option.toolTip,
+        name: option.name,
+        index: i,
+        toolTip: option.toolTip,
         selected: i === index,
         padding: padding,
         icon: option.icon,
@@ -145,21 +145,21 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = useTheme(), {label: label = "Option", value: value = 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, showToolTip: showToolTip = 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), showToolTip && ref.current) {
+    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 => {
+        if (onToolTip(null), toolTip && ref.current) {
             const tip = {
                 type: ToolTipType.button,
                 payload: {
-                    label: showToolTip
+                    label: toolTip
                 },
                 event: e,
                 ref: ref
             };
             onToolTip(tip);
         }
-    }, [ showToolTip, onToolTip ]), handleMouseLeave = useCallback(() => {
-        showToolTip && onToolTip(null);
-    }, [ showToolTip, 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(() => ({
+    }, [ toolTip, onToolTip ]), handleMouseLeave = useCallback(() => {
+        toolTip && onToolTip(null);
+    }, [ 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"),
@@ -182,8 +182,8 @@ const Option = React.memo(props => {
         tabIndex: selected ? 0 : -1,
         onMouseEnter: handleMouseOver,
         onMouseLeave: handleMouseLeave,
-        onClick: () => onClick(value),
-        onKeyDown: e => onKeyDown(e, value),
+        onClick: () => onClick(index),
+        onKeyDown: e => onKeyDown(e, index),
         children: [ icon && jsx("div", {
             className: css.icon,
             children: jsx(Icon, {
@@ -192,13 +192,13 @@ const Option = React.memo(props => {
                 size: iconSize,
                 strokeColor: strokeColor
             })
-        }), label, 0 !== count && jsx(Badge, {
+        }), name, 0 !== count && jsx(Badge, {
             variant: "light",
             hideNull: !1,
             count: count
         }) ]
     });
-}, (prevProps, nextProps) => prevProps.selected === nextProps.selected && prevProps.underline === nextProps.underline && prevProps.tabWidth === nextProps.tabWidth && prevProps.disabled === nextProps.disabled && prevProps.iconGap === nextProps.iconGap && prevProps.iconSize === nextProps.iconSize && prevProps.count === nextProps.count && prevProps.label === nextProps.label && prevProps.icon === nextProps.icon && prevProps.borderColor === nextProps.borderColor && prevProps.textSize === nextProps.textSize && prevProps.padding === nextProps.padding);
+}, (prevProps, nextProps) => prevProps.selected === nextProps.selected && prevProps.underline === nextProps.underline && prevProps.tabWidth === nextProps.tabWidth && prevProps.disabled === nextProps.disabled && prevProps.iconGap === nextProps.iconGap && prevProps.iconSize === nextProps.iconSize && prevProps.count === nextProps.count && prevProps.icon === nextProps.icon && prevProps.borderColor === nextProps.borderColor && prevProps.textSize === nextProps.textSize && prevProps.padding === nextProps.padding && prevProps.name === nextProps.name && prevProps.index === nextProps.index);
 
 Option.displayName = "TabOption";
 

package/dist/esm/chunks/{TextArea-Ml2KuVpk.mjs → TextArea-BbveliHo.mjs}

@@ -1,19 +1,21 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { B as Button } from "./Button-Bvgo8DRW.mjs";
+import { corners } from "../theme/corners.mjs";
+
+import { B as Button } from "./Button-BYALDfuE.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 = 4, 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 = "16px 4px 16px 16px", error: error = !1, resizable: resizable = !0, hasSend: hasSend = !1, sendOffset: sendOffset = {
         bottom: 10,
         right: 10
-    }, sendSize: sendSize = 36, returnSubmits: returnSubmits = !1, backgroundColor: backgroundColor, bgColor: bgColor, 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", "bgColor", "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 = null != backgroundColor ? backgroundColor : bgColor, [isFocused, setIsFocused] = useState(focused), [text, setText] = useState(value), ref = useRef(null), handleResize = useCallback(() => {
+    }, 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(() => {
         (null == ref ? void 0 : ref.current) && (ref.current.style.height = "auto", ref.current.style.height = `${ref.current.scrollHeight}px`);
     }, []);
     useEffect(() => {
@@ -29,8 +31,8 @@ const TextArea = React.memo(props => {
         var _a, _b;
         setIsFocused(!1), onBlur(null !== (_b = null === (_a = ref.current) || void 0 === _a ? void 0 : _a.value) && void 0 !== _b ? _b : "");
     }, [ onBlur ]), handleSubmit = useCallback(e => {
-        null == e || e.preventDefault(), handleFocus(), onSubmit(text), submitClears && setText(""), 
-        (null == ref ? void 0 : ref.current) && (ref.current.value = ""), handleResize();
+        null == e || e.preventDefault(), handleFocus(), onSubmit(text), submitClears && (setText(""), 
+        ref.current && (ref.current.value = "")), handleResize();
     }, [ handleFocus, onSubmit, text, submitClears, handleResize ]), handleKeyDownWrapper = useCallback(e => {
         returnSubmits && "Enter" === e.key && (e.preventDefault(), e.stopPropagation(), 
         handleSubmit(void 0)), onKeyDown(e);

package/dist/esm/chunks/{TextField-BS3bOQj-.mjs → TextField-D-680Ah3.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,25 +11,27 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
+import { corners } from "../theme/corners.mjs";
+
 import "../theme/type.mjs";
 
-import { s as setStyle } from "./misc-CV0SS-jF.mjs";
+import { s as setStyle } from "./misc-O5ZSVDP0.mjs";
 
-import "./broadcastChannel-Bw5Pck80.mjs";
+import "./broadcastChannel-B8FxWRVj.mjs";
 
-import "./webRTCStore-B2GPjQX6.mjs";
+import "./webRTCStore-fNJiXwLR.mjs";
 
-import "./microphoneStore-CDNQZJzG.mjs";
+import "./microphoneStore-B9HEjn8x.mjs";
 
-import "./volumeStore-C-rKyxRG.mjs";
+import "./volumeStore-C2AnBA5B.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-Bvgo8DRW.mjs";
+import { B as Button } from "./Button-BYALDfuE.mjs";
 
-import { I as Icon } from "./Icon-BMT9cn9A.mjs";
+import { I as Icon } from "./Icon-CGqm8lg7.mjs";
 
-import { I as IconButton } from "./IconButton-DEcW36kF.mjs";
+import { I as IconButton } from "./IconButton-LsCK8HUU.mjs";
 
 var css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",
@@ -41,7 +43,8 @@ var css = {
     xs: "TextField-module_xs__vyt2t type-module_body-xs-regular__ZAFft",
     s: "TextField-module_s__0qm83 type-module_body-s-regular__vRHSP",
     m: "TextField-module_m__M-tLl type-module_body-m-regular__LuQBA",
-    l: "TextField-module_l__gbNRz type-module_body-l-regular__lOYbg"
+    l: "TextField-module_l__gbNRz type-module_body-l-regular__lOYbg",
+    xl: "TextField-module_xl__tp--W type-module_body-xl-regular__pF2kC"
 };
 
 const MOTION_CONFIG = {
@@ -64,7 +67,7 @@ const MOTION_CONFIG = {
     const theme = useTheme(), {name: name = "input_name", value: value = "", label: label, labelSize: labelSize = "m", textSize: textSize = "m", placeholder: placeholder = "placeholder", focused: focused = !1, onSubmit: onSubmit = () => null, onChange: onChange = () => null, onBlur: onBlur = () => null, onFocus: onFocus = () => null, onKeydown: onKeydown = () => null, onAction: onAction = () => null, onPaste: onPaste = () => null, onClear: onClear = () => null, actionButton: actionButton = !1, maxLength: maxLength, size: size = {
         width: "100%",
         height: "auto"
-    }, padding: padding, borderRadius: borderRadius = 8, editable: editable = !0, textAlign: textAlign = "left", inline: inline = !1, noShow: noShow = !1, borderType: borderType = "box", error: error = !1, borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorBlurred: borderColorBlurred = "var(--core-outline-primary)", borderColorError: borderColorError = "var(--feedback-warning)", backgroundColorFocused: backgroundColorFocused = "var(--core-surface-secondary)", backgroundColorBlurred: backgroundColorBlurred = "var(--core-surface-secondary)", textColorFocused: textColorFocused = "var(--core-text-primary)", textColorBlurred: textColorBlurred = "var(--core-text-primary)", textColorError: textColorError = "var(--feedback-warning)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-disabled)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", labelColor: labelColor = "var(--core-text-primary)", iconLeft: iconLeft, clearButton: clearButton = {
+    }, padding: padding, borderRadius: borderRadius = corners["corner-m"], editable: editable = !0, textAlign: textAlign = "left", inline: inline = !1, noShow: noShow = !1, borderType: borderType = "box", error: error = !1, borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorBlurred: borderColorBlurred = "var(--core-outline-primary)", borderColorError: borderColorError = "var(--feedback-warning)", backgroundColorFocused: backgroundColorFocused = "var(--core-surface-secondary)", backgroundColorBlurred: backgroundColorBlurred = "var(--core-surface-secondary)", textColorFocused: textColorFocused = "var(--core-text-primary)", textColorBlurred: textColorBlurred = "var(--core-text-primary)", textColorError: textColorError = "var(--feedback-warning)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-disabled)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", labelColor: labelColor = "var(--core-text-primary)", iconLeft: iconLeft, clearButton: clearButton = {
         size: 20
     }, clearBlurs: clearBlurs = !1, disabled: disabled = !1, inputType: inputType = "text"} = props, divAttributes = __rest(props, [ "name", "value", "label", "labelSize", "textSize", "placeholder", "focused", "onSubmit", "onChange", "onBlur", "onFocus", "onKeydown", "onAction", "onPaste", "onClear", "actionButton", "maxLength", "size", "padding", "borderRadius", "editable", "textAlign", "inline", "noShow", "borderType", "error", "borderColorFocused", "borderColorBlurred", "borderColorError", "backgroundColorFocused", "backgroundColorBlurred", "textColorFocused", "textColorBlurred", "textColorError", "textColorPlaceholder", "textColorDisabled", "labelColor", "iconLeft", "clearButton", "clearBlurs", "disabled", "inputType" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", input = useRef(null), [text, setText] = useState(value), [isFocused, setIsFocused] = useState(focused), [show, setShow] = useState(!1);
     useEffect(() => {

package/dist/esm/chunks/{Tip-BrBts6HZ.mjs → Tip-IdoSsqpu.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-p9eD9VLE.mjs";
+import { a as __rest } from "./tslib.es6-uJhEruZV.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -7,14 +7,17 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-CV0SS-jF.mjs";
+import { corners } from "../theme/corners.mjs";
+
+import { f as filterClasses } from "./misc-O5ZSVDP0.mjs";
 
 var 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",
     m: "Tip-module_m__9qJbB type-module_body-m-regular__LuQBA",
-    l: "Tip-module_l__OdNuh type-module_body-l-regular__lOYbg"
+    l: "Tip-module_l__OdNuh type-module_body-l-regular__lOYbg",
+    xl: "Tip-module_xl__izmFk type-module_body-xl-regular__pF2kC"
 };
 
 const tipBasePos = {
@@ -22,7 +25,7 @@ const tipBasePos = {
     top: 0
 }, TipBase = React.forwardRef((props, ref) => {
     var _a;
-    const {tip: tip, size: size = "s", backgroundColor: backgroundColor, bgColor: bgColor, textColor: textColor, color: color, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius, radius: radius, coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500} = props, divAttributes = __rest(props, [ "tip", "size", "backgroundColor", "bgColor", "textColor", "color", "border", "borderColor", "padding", "borderRadius", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = useState(tipBasePos), [ready, setReady] = useState(!1), [animate, setAnimate] = useState(!1), timer = useRef(null), resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedTextColor = null != textColor ? textColor : color, resolvedBorderRadius = null != borderRadius ? borderRadius : radius;
+    const {tip: tip, textSize: textSize = "s", backgroundColor: backgroundColor, textColor: textColor, color: color, border: border = !0, borderColor: borderColor, padding: padding, borderRadius: borderRadius, radius: radius, coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500} = props, divAttributes = __rest(props, [ "tip", "textSize", "backgroundColor", "textColor", "color", "border", "borderColor", "padding", "borderRadius", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = useState(tipBasePos), [ready, setReady] = useState(!1), [animate, setAnimate] = useState(!1), timer = useRef(null), resolvedBackgroundColor = backgroundColor, resolvedTextColor = null != textColor ? textColor : color, resolvedBorderRadius = null != borderRadius ? borderRadius : radius;
     useEffect(() => {
         timer.current && clearTimeout(timer.current);
         const {x: x, y: y} = null != coords ? coords : {
@@ -52,14 +55,14 @@ const tipBasePos = {
         "--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 : "4px"
+        "--tooltip-border-radius": null != resolvedBorderRadius ? resolvedBorderRadius : `${corners["corner-xs"]}px`
     }), [ padding, resolvedBackgroundColor, resolvedTextColor, border, borderColor, resolvedBorderRadius ]), coordStyle = useMemo(() => {
         const {left: left, top: top} = pos;
         return {
             left: `${null != left ? left : 0}px`,
             top: `${null != top ? top : 0}px`
         };
-    }, [ pos ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]);
+    }, [ pos ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[textSize], divClass ]), [ textSize, divClass ]);
     return jsx(motion.div, Object.assign({
         ref: ref,
         id: divId,