@apple-pie/slice 0.1.33 → 0.1.35

package/dist/cjs/chunks/IconButton-C2pgDGer.js

@@ -0,0 +1,182 @@
+'use client';
+"use strict";
+
+var AnimationPreset, AnimationType, tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-C6Yv-vZ7.js"), Dot = require("./Dot-ByyRFxJf.js"), Icon = require("./Icon-DR7d5wbQ.js"), sharedTypes = require("./sharedTypes-DC-9YrKq.js"), css_button = "IconButton-module_button__rziqa flexBox-module_row__z24tF", css_label = "IconButton-module_label__qWGFD flexBox-module_row__z24tF type-module_body-l-regular__lOYbg", css_icon = "IconButton-module_icon__2DDWy flexBox-module_row__z24tF", css_count = "IconButton-module_count__6r373 flexBox-module_row__z24tF";
+
+/**
+ * Helper for quick popular animation effects
+ */
+exports.AnimationPreset = void 0, (AnimationPreset = exports.AnimationPreset || (exports.AnimationPreset = {})).Rotate = "rotate", 
+AnimationPreset.Fade = "fade", AnimationPreset.Scale = "scale", 
+/**
+ * Popular types
+ */
+exports.AnimationType = void 0, (AnimationType = exports.AnimationType || (exports.AnimationType = {})).Rotate = "rotate", 
+AnimationType.Fade = "opacity", AnimationType.Scale = "scale";
+
+/**
+ * Resolves presets to a button animation
+ */
+const presetAnimation = {
+    [exports.AnimationPreset.Rotate]: {
+        animation: {
+            type: exports.AnimationType.Rotate,
+            value: {
+                on: 0,
+                off: 180
+            }
+        },
+        transition: {
+            on: {
+                duration: .25,
+                ease: "linear"
+            }
+        }
+    },
+    [exports.AnimationPreset.Fade]: {
+        animation: {
+            type: exports.AnimationType.Fade,
+            value: {
+                off: 0,
+                on: 1
+            }
+        },
+        transition: {
+            on: {
+                duration: .25,
+                ease: "easeInOut"
+            }
+        }
+    },
+    [exports.AnimationPreset.Scale]: {
+        animation: {
+            type: exports.AnimationType.Scale,
+            value: {
+                off: 0,
+                on: 1
+            }
+        },
+        transition: {
+            on: {
+                duration: .25,
+                ease: "linear"
+            }
+        }
+    }
+}, resolveVariants = (presets, custom) => {
+    const animations = [];
+    let transition;
+    if (presets) {
+        const presetAnimations = presetAnimation[presets].animation, presetTransition = presetAnimation[presets].transition, animationEntries = Array.isArray(presetAnimations) ? presetAnimations : [ presetAnimations ];
+        animations.push(...animationEntries), presetTransition && (transition = presetTransition);
+    }
+    if (custom) {
+        const customAnimations = custom.animation, customTransition = custom.transition, customAnimationEntries = Array.isArray(customAnimations) ? customAnimations : [ customAnimations ];
+        animations.push(...customAnimationEntries), customTransition && (transition = customTransition);
+    }
+    return (animations => {
+        if (!animations) return;
+        const variants = {
+            initial: {},
+            animate: {},
+            exit: {}
+        }, {animation: animation, transition: transition} = animations, animationEntries = Array.isArray(animation) ? animation : [ animation ], {on: on, off: off} = null != transition ? transition : {};
+        for (const entry of animationEntries) {
+            const {type: type, value: value} = entry;
+            variants.initial = Object.assign(Object.assign({}, variants.initial), {
+                [type]: value.off
+            }), variants.animate = Object.assign(Object.assign({}, variants.animate), {
+                [type]: value.on,
+                transition: on
+            }), variants.exit = Object.assign(Object.assign({}, variants.exit), {
+                [type]: value.off,
+                transition: null != off ? off : on
+            });
+        }
+        return variants;
+    })({
+        animation: animations,
+        transition: transition
+    });
+}, IconButton = React.memo(props => {
+    const {frameSize: frameSize = 36, iconSize: iconSize = 20, round: round = !0, icon: icon = "more", borderRadius: borderRadius = 4, border: border = !1, tooltip: tooltip, color: color, colorOn: colorOn, iconFill: iconFill = !1, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorOn: bgColorOn = "var(--core-outline-primary)", iconColor: iconColor = "var(--core-text-primary)", iconColorOn: iconColorOn = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, fillColor: fillColor, label: label, hover: hover = !0, count: count = 0, toggle: toggle = !1, toggleIcon: toggleIcon = !1, isToggled: isToggled = !1, disabled: disabled = !1, showDot: showDot = !1, buttonSize: buttonSize = "m", presetAnimations: presetAnimations, customAnimations: customAnimations, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "frameSize", "iconSize", "round", "icon", "borderRadius", "border", "tooltip", "color", "colorOn", "iconFill", "bgColor", "bgColorHover", "bgColorOn", "iconColor", "iconColorOn", "iconColorHover", "transition", "variants", "initial", "animate", "exit", "fillColor", "label", "hover", "count", "toggle", "toggleIcon", "isToggled", "disabled", "showDot", "buttonSize", "presetAnimations", "customAnimations", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [on, setOn] = React.useState(isToggled), [hovered, setHovered] = React.useState(!1);
+    React.useEffect(() => setOn(isToggled), [ isToggled ]);
+    const handleClick = React.useCallback(e => {
+        disabled || (tooltip && onToolTip(null), toggle && setOn(!on), onClick(e));
+    }, [ disabled, tooltip, onToolTip, on, onClick, toggle ]), handleMouseEnter = React.useCallback(e => {
+        if (setHovered(!0), !(null == ref ? void 0 : ref.current) || !tooltip) return;
+        const tip = {
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: e,
+            ref: ref
+        };
+        onToolTip(tip);
+    }, [ tooltip, onToolTip ]), handleMouseLeave = React.useCallback(() => {
+        setHovered(!1), tooltip && onToolTip(null);
+    }, [ tooltip, onToolTip ]), bgColorNormal = React.useMemo(() => on ? bgColorOn : null != bgColor ? bgColor : "var(--core-surface-secondary)", [ bgColorOn, bgColor, on ]), bgHoverColor = React.useMemo(() => hover && on ? bgColorOn : hover ? bgColorHover : null != bgColor ? bgColor : "transparent", [ hover, bgColor, bgColorOn, bgColorHover, on ]), textColor = React.useMemo(() => on ? colorOn : null != color ? color : "var(--core-text-primary)", [ on, colorOn, color ]), setIconColor = React.useMemo(() => on ? iconColorOn : hovered ? iconColorHover : null != iconColor ? iconColor : "var(--core-text-primary)", [ on, iconColorOn, iconColor, iconColorHover, hovered ]), size = React.useMemo(() => buttonSize ? "s" === buttonSize ? 24 : "m" === buttonSize ? 36 : "l" === buttonSize ? 44 : "xl" === buttonSize ? 56 : void 0 : frameSize, [ frameSize, buttonSize ]), cssVars = React.useMemo(() => ({
+        "--ib-bg-color": bgColorNormal,
+        "--ib-bg-color-hover": disabled ? bgColorNormal : bgHoverColor,
+        "--ib-icon-size": `${null != iconSize ? iconSize : 0}px`,
+        "--ib-button-size": `${null != size ? size : 0}px`,
+        "--ib-border-radius": round ? "100%" : `${null != borderRadius ? borderRadius : 0}px`,
+        "--ib-border": border ? "1px" : 0,
+        "--ib-color": textColor,
+        "--ib-cursor": disabled ? "default" : "pointer"
+    }), [ bgColorNormal, bgHoverColor, textColor, border, size, borderRadius, iconSize, round, disabled ]);
+    return jsxRuntime.jsxs(react.motion.button, Object.assign({
+        id: divId,
+        type: "button",
+        className: `${css_button}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onClick: e => handleClick(e),
+        onMouseOutCapture: handleMouseLeave,
+        onMouseOverCapture: handleMouseEnter,
+        transition: transition,
+        variants: variants,
+        initial: initial,
+        animate: animate,
+        exit: exit,
+        disabled: disabled,
+        "aria-disabled": disabled,
+        ref: ref
+    }, rest, {
+        children: [ jsxRuntime.jsx(react.motion.div, {
+            className: css_icon,
+            style: {
+                opacity: disabled ? .3 : 1
+            },
+            variants: resolveVariants(presetAnimations, customAnimations),
+            initial: isToggled ? "animate" : "initial",
+            animate: on ? "animate" : "exit",
+            children: jsxRuntime.jsx(Icon.Icon, {
+                name: icon,
+                strokeColor: setIconColor,
+                fillColor: fillColor,
+                disabled: disabled,
+                size: iconSize,
+                fill: iconFill,
+                toggle: !!toggleIcon && on,
+                pointer: !0
+            })
+        }), label && jsxRuntime.jsx("div", {
+            className: css_label,
+            children: label
+        }), jsxRuntime.jsx(Dot.Dot, {
+            show: showDot
+        }), 0 !== count && jsxRuntime.jsx("div", {
+            className: css_count,
+            children: jsxRuntime.jsx(Badge.Badge, {
+                variant: "light",
+                count: count,
+                hideNull: !0
+            })
+        }) ]
+    }));
+});
+
+/**
+ * Resolves button animation to motion variants
+ */ exports.IconButton = IconButton;

package/dist/cjs/chunks/{IndexedDB-Ddhq6Gjd.js → IndexedDB-B3huw-IF.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js");
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js");
 
 exports.IndexedDB = class {
     constructor(storeName, options = {}) {

package/dist/cjs/chunks/{Label-d32ENzwL.js → Label-Bz1y0MlN.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var LabelBackground, tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), css = {
+var LabelBackground, tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.js"), css = {
     label: "Label-module_label__RaRvM",
     button: "Label-module_button__N8bcQ type-module_body-m-regular__LuQBA",
     xs: "Label-module_xs__K9Ai6 type-module_body-xs-regular__ZAFft",

package/dist/cjs/chunks/{Level-B8eT8XyV.js → Level-CGC1rIjD.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), audioVisualizer = require("./audioVisualizer-C7fMG0WH.js"), css_wrapper = "Level-module_wrapper__yOfXw", css_barContainer = "Level-module_barContainer__QMUdv", css_bar = "Level-module_bar__MnApX";
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.js"), audioVisualizer = require("./audioVisualizer-DFVbG1U3.js"), css_wrapper = "Level-module_wrapper__yOfXw", css_barContainer = "Level-module_barContainer__QMUdv", css_bar = "Level-module_bar__MnApX";
 
 const Level = React.memo(function(props) {
     const {width: width = 100, height: height = 4, gap: gap = 0, audioStream: audioStream, playing: playing = !1, minIntensity: minIntensity = 0, maxIntensity: maxIntensity = 5, intensity: intensity = 3.5, peakIntensity: peakIntensity = .5, risePerSeconds: risePerSeconds = 4, releasePerSeconds: releasePerSeconds, ReleasePerSeconds: ReleasePerSeconds = 1.5, borderRadius: borderRadius = 4, borderColor: borderColor = "transparent", borderWidth: borderWidth = 0, colorActive: colorActive = "var(--feedback-positive)", backgroundColor: backgroundColor = "var(--core-surface-primary-tint)"} = props, divAttributes = tslib_es6.__rest(props, [ "width", "height", "gap", "audioStream", "playing", "minIntensity", "maxIntensity", "intensity", "peakIntensity", "risePerSeconds", "releasePerSeconds", "ReleasePerSeconds", "borderRadius", "borderColor", "borderWidth", "colorActive", "backgroundColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", visualizerRef = React.useRef(null), [normalizedIntensity, setNormalizedIntensity] = React.useState(0), totalBars = Math.max(1, Math.floor(maxIntensity)), minBars = Math.max(0, Math.min(Math.floor(minIntensity), totalBars)), releaseRate = null != releasePerSeconds ? releasePerSeconds : ReleasePerSeconds, intensityIntervals = React.useMemo(() => new Array(totalBars).fill(0).map((_, index) => index), [ totalBars ]), activeBars = React.useMemo(() => {

package/dist/cjs/chunks/{Modal-CUAj4e6x.js → Modal-C9p4TjIF.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Button = require("./Button-CuGvPAkH.js"), Icon = require("./Icon-DjvProjz.js"), IconButton = require("./IconButton-BuwQLUuj.js"), css = {
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.js"), Button = require("./Button-DSFVBBSz.js"), Icon = require("./Icon-DR7d5wbQ.js"), IconButton = require("./IconButton-C2pgDGer.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",

package/dist/cjs/chunks/{ModalController-BwFAVI5G.js → ModalController-B1l70sB5.js}

@@ -2,10 +2,10 @@
 
 var jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react");
 
-require("./microphoneStore-Dy5TwE2I.js"), require("./volumeStore-BXFAQhvS.js"), 
-require("./webRTCStore-DRjvbnve.js");
+require("./microphoneStore-BWE0f5k5.js"), require("./volumeStore-TOX_FL_t.js"), 
+require("./webRTCStore-B1cS14MD.js");
 
-var Overlay = require("./Overlay-CaAA3ey5.js"), modalStore = require("./modalStore-CaQkdY5_.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-77krece8.js"), modalStore = require("./modalStore-C2TNegI3.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-CaAA3ey5.js → Overlay-77krece8.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.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-CZ8Is2ry.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-uExZ5E3x.js → Pager-B0FSZmAn.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.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-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.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-DwqslY4o.js → ProgressIndicator-CK7dKk8W.js}

@@ -5,12 +5,12 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_u
 
 require("../theme/colors.js");
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js");
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js");
 
-require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
-require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
+require("./webRTCStore-B1cS14MD.js"), require("./microphoneStore-BWE0f5k5.js"), 
+require("./volumeStore-TOX_FL_t.js"), require("../hooks/useWindow.js");
 
-var Icon = require("./Icon-DjvProjz.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-DR7d5wbQ.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);

package/dist/cjs/chunks/{PromptInput-Dl8l8cZv.js → PromptInput-BFjWPvXi.js}

@@ -3,14 +3,14 @@
 
 var jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("./tslib.es6-DqjaJVC3.js");
+require("../theme/colors.js"), require("./tslib.es6-CZ8Is2ry.js");
 
-var misc = require("./misc-BwQIEIuF.js");
+var misc = require("./misc-Xy8NlSfu.js");
 
-require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
-require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
+require("./webRTCStore-B1cS14MD.js"), require("./microphoneStore-BWE0f5k5.js"), 
+require("./volumeStore-TOX_FL_t.js"), require("../hooks/useWindow.js");
 
-var Button = require("./Button-CuGvPAkH.js"), FileList = require("./FileList-CzQZZErI.js"), css = {
+var Button = require("./Button-DSFVBBSz.js"), FileList = require("./FileList-CY_ZUI5o.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",
@@ -29,11 +29,13 @@ const PromptInputBase = React.forwardRef((props, ref) => {
         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);
-    }, [ onFocus, attachments ]), handleBlur = React.useCallback(() => {
+    }, [ onFocus, attachments ]), handleBlur = React.useCallback(valueOverride => {
         var _a, _b;
         setIsFocused(!1), null === (_a = textAreaRef.current) || void 0 === _a || _a.blur(), 
-        null == onBlur || onBlur(null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
-    }, [ onBlur, attachments ]), handleAttachmentsChange = React.useCallback(newFiles => {
+        null == onBlur || onBlur(null != valueOverride ? valueOverride : null === (_b = textAreaRef.current) || void 0 === _b ? void 0 : _b.value, attachments);
+    }, [ onBlur, attachments ]), handleTextAreaBlur = React.useCallback(() => {
+        handleBlur();
+    }, [ handleBlur ]), handleAttachmentsChange = React.useCallback(newFiles => {
         var _a;
         null == onAttachmentsChange || onAttachmentsChange(newFiles), null == onChange || onChange(null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value, newFiles);
     }, [ onAttachmentsChange, onChange ]), handleChange = React.useCallback(e => {
@@ -44,9 +46,10 @@ const PromptInputBase = React.forwardRef((props, ref) => {
         if (stopEnabled) return;
         if (working && submitWorking) return;
         const currentValue = null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value;
-        currentValue && (null == onSubmit || onSubmit(currentValue, attachments), submitClears && setTextValue(""), 
-        handleBlur());
-    }, [ stopEnabled, submitClears, onSubmit, handleBlur, attachments, working, submitWorking ]), handleStop = React.useCallback(() => {
+        currentValue && (null == onSubmit || onSubmit(currentValue, attachments), submitClears && (setTextValue(""), 
+        null == onChange || onChange("", attachments), textAreaRef.current && (textAreaRef.current.value = "")), 
+        handleBlur(submitClears ? "" : currentValue));
+    }, [ stopEnabled, submitClears, onChange, onSubmit, handleBlur, attachments, working, submitWorking ]), handleStop = React.useCallback(() => {
         null == onStop || onStop(), handleFocus();
     }, [ onStop, handleFocus ]), handleKeyDown = React.useCallback(e => {
         "Enter" === e.key && enterSubmits && (e.preventDefault(), handleSubmit());
@@ -67,8 +70,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
         var _a, _b;
         focused ? null === (_a = textAreaRef.current) || void 0 === _a || _a.focus() : null === (_b = textAreaRef.current) || void 0 === _b || _b.blur();
     }, [ focused ]), React.useEffect(() => {
-        var _a;
-        (null === (_a = textAreaRef.current) || void 0 === _a ? void 0 : _a.value) !== value && setTextValue(value);
+        setTextValue(value);
     }, [ value ]);
     const cssVars = React.useMemo(() => ({
         "--prompt-width": misc.setStyle(width),
@@ -107,7 +109,7 @@ const PromptInputBase = React.forwardRef((props, ref) => {
                 onChange: handleChange,
                 placeholder: setPlaceholder,
                 onFocus: handleFocus,
-                onBlur: handleBlur,
+                onBlur: handleTextAreaBlur,
                 onKeyDown: handleKeyDown,
                 maxLength: maxLength,
                 rows: 1

package/dist/cjs/chunks/{RadioButton-DPpAOFQt.js → RadioButton-qoMg2eXZ.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Icon = require("./Icon-DjvProjz.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-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.js"), Icon = require("./Icon-DR7d5wbQ.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);

package/dist/cjs/chunks/{RadioButtonList-IbPA6A3y.js → RadioButtonList-BKKQcFSI.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), RadioButton = require("./RadioButton-DPpAOFQt.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-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-Xy8NlSfu.js"), RadioButton = require("./RadioButton-qoMg2eXZ.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-D5oa7NGy.js → Slider-D7r0G9UI.js}

@@ -1,7 +1,16 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useObserveResize = require("../hooks/useObserveResize.js"), misc = require("./misc-BwQIEIuF.js"), debounce = require("./debounce-BtCCTkbG.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";
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
+
+require("../theme/colors.js");
+
+var misc = require("./misc-Xy8NlSfu.js"), debounce = require("./debounce-Dt7br1wm.js");
+
+require("./webRTCStore-B1cS14MD.js"), require("./microphoneStore-BWE0f5k5.js"), 
+require("./volumeStore-TOX_FL_t.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";
 
 const Slider = React.memo(props => {
     const {value: value = 25, scaleMin: scaleMin = 0, scaleMax: scaleMax = 100, width: width, height: height = 2, touchHeight: touchHeight = 24, trackHeadSize: trackHeadSize = 7, step: step, disabled: disabled = !1, disabledOpacity: disabledOpacity = .5, cursor: cursor = "default", headColor: headColor = "var(--core-text-light)", trackColor: trackColor = "var(--core-surface-secondary)", progressColor: progressColor = "var(--core-text-tertiary)", trackHeadBorderSize: trackHeadBorderSize = 1, trackHeadBorderColor: trackHeadBorderColor = "var(--core-outline-secondary)", onChange: onChange = () => null, onDragChange: onDragChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "value", "scaleMin", "scaleMax", "width", "height", "touchHeight", "trackHeadSize", "step", "disabled", "disabledOpacity", "cursor", "headColor", "trackColor", "progressColor", "trackHeadBorderSize", "trackHeadBorderColor", "onChange", "onDragChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), track = React.useRef(null), head = React.useRef(null), [currentValue, setCurrentValue] = React.useState(value), absProgressRef = React.useRef(value), relativeProgressRef = React.useRef(0), didMount = React.useRef(!1), size = hooks_useObserveResize.useObserveResize(ref, {

package/dist/cjs/chunks/{Spacer-DtUh2VLv.js → Spacer-DHvuvgy8.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
 
 const Spacer = React.memo(props => {
     const {size: size = 8} = 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(() => ({

package/dist/cjs/chunks/{Switch-Bs0r5va5.js → Switch-D0WIz66o.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.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-CZ8Is2ry.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, backgroundColorOff: backgroundColorOff, bgColorOn: bgColorOn = "var(--feedback-positive)", bgColorOff: bgColorOff = "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", "bgColorOn", "bgColorOff", "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 = null != backgroundColorOn ? backgroundColorOn : bgColorOn, resolvedBackgroundColorOff = null != backgroundColorOff ? backgroundColorOff : bgColorOff;

package/dist/cjs/chunks/{TabBar-BCSTg_Uc.js → TabBar-OZ8cC1Wh.js}

@@ -1,12 +1,27 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
-require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
+require("../theme/colors.js");
 
-var Badge = require("./Badge-DWUeXxm2.js"), Icon = require("./Icon-DjvProjz.js"), IconButton = require("./IconButton-BuwQLUuj.js"), sharedTypes = require("./sharedTypes-BOieqpQy.js"), css_wrapper = "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS", css_option = "TabBar-module_option__gYjDf flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_icon = "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF", css_close = "TabBar-module_close__bvSBh flexBox-module_row__z24tF";
+var misc = require("./misc-Xy8NlSfu.js");
+
+require("./webRTCStore-B1cS14MD.js"), require("./microphoneStore-BWE0f5k5.js"), 
+require("./volumeStore-TOX_FL_t.js"), require("../hooks/useWindow.js");
+
+var Badge = require("./Badge-C6Yv-vZ7.js"), Icon = require("./Icon-DR7d5wbQ.js"), IconButton = require("./IconButton-C2pgDGer.js"), sharedTypes = require("./sharedTypes-DC-9YrKq.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",
+    close: "TabBar-module_close__bvSBh flexBox-module_row__z24tF",
+    xs: "TabBar-module_xs__QDjV9 type-module_body-xs-regular__ZAFft",
+    s: "TabBar-module_s__-EBj2 type-module_body-s-regular__vRHSP",
+    m: "TabBar-module_m__3sCA3 type-module_body-m-regular__LuQBA",
+    l: "TabBar-module_l__hy1rR type-module_body-l-regular__lOYbg",
+    xl: "TabBar-module_xl__zaASU type-module_body-xl-regular__pF2kC",
+    selected: "TabBar-module_selected__UmBdu"
+};
 
 const placeholderOptions = [ {
     name: "Light",
@@ -17,7 +32,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, 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", "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 = 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([]);
     React.useEffect(() => {
         let selectedIndex = 0;
         selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
@@ -69,26 +84,30 @@ const placeholderOptions = [ {
         underline: underline,
         iconFill: iconFill,
         tabWidth: tabWidth,
+        textSize: textSize,
+        borderColor: borderColor,
         buttonRef: element => {
             optionRefs.current[i] = element;
         }
-    }, `${i}_option_${option.name}`)), [ options, index, padding, iconSize, iconGap, disabled, underline, tabWidth, onToolTip, handleOptionClick, iconFill, handleOptionKeyDown ]), setStyle = React.useCallback(value => "string" == typeof value ? value : `${value}px`, []), cssVars = React.useMemo(() => ({
+    }, `${i}_option_${option.name}`)), [ options, index, padding, iconSize, iconGap, disabled, underline, tabWidth, onToolTip, handleOptionClick, iconFill, handleOptionKeyDown, borderColor, textSize ]), cssVars = React.useMemo(() => ({
         "--tab-bar-gap": `${tabGap}px`,
-        "--tab-bar-height": `${setStyle(height)}px`,
-        "--tab-bar-width": setStyle(width),
+        "--tab-bar-height": `${misc.setStyle(height)}px`,
+        "--tab-bar-width": misc.setStyle(width),
         "--tab-bar-border-bottom": "" + (border ? "1px" : "0"),
+        "--tab-bar-border-color": borderColor,
+        "--tab-bar-justify": justify,
         "--tab-bar-close-width": `${closeWidth}px`,
-        "--tab-bar-close-padding": padding ? `${padding}px` : "8px"
-    }), [ tabGap, height, width, border, setStyle, closeWidth, padding ]);
+        "--tab-bar-close-padding": misc.setStyle(padding, "8px")
+    }), [ tabGap, height, width, border, closeWidth, padding, borderColor, justify ]);
     return jsxRuntime.jsxs("div", Object.assign({
         id: divId,
-        className: `${css_wrapper}${divClass}`,
+        className: `${css.wrapper}${divClass}`,
         style: Object.assign(Object.assign({}, divStyle), cssVars),
         role: "tablist",
         "aria-orientation": "horizontal"
     }, rest, {
         children: [ renderedOptions, hasClose && jsxRuntime.jsx("div", {
-            className: css_close,
+            className: css.close,
             children: jsxRuntime.jsx(IconButton.IconButton, {
                 iconSize: iconSize - 4,
                 frameSize: iconSize,
@@ -105,7 +124,7 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = hooks_useTheme.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", count: count = 0, iconFill: iconFill = !1, 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(), {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 = 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), showToolTip && ref.current) {
             const tip = {
                 type: sharedTypes.ToolTipType.button,
@@ -121,17 +140,18 @@ const Option = React.memo(props => {
         showToolTip && onToolTip(null);
     }, [ showToolTip, 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-padding": `${padding}px`,
+        "--tab-bar-option-border-color": borderColor,
+        "--tab-bar-option-padding": misc.setStyle(padding, "8px"),
         "--tab-bar-option-icon-size": `${iconSize}px`,
         "--tab-bar-option-cursor": disabled ? "default" : "pointer",
         "--tab-bar-option-gap": `${null != iconGap ? iconGap : 0}px`,
         "--tab-bar-option-color": textColor,
         "--tab-bar-option-width": setTabWidth,
         "--tab-bar-option-flex": setTabFlex
-    }), [ padding, iconSize, disabled, textColor, iconGap, setTabFlex, setTabWidth, setUnderline ]);
+    }), [ padding, iconSize, disabled, textColor, iconGap, setTabFlex, setTabWidth, setUnderline, borderColor ]);
     return jsxRuntime.jsxs("button", {
         type: "button",
-        className: css_option,
+        className: `${css.option} ${css[textSize]} ${selected ? css.selected : ""}`,
         style: cssVars,
         ref: element => {
             ref.current = element, null == buttonRef || buttonRef(element);
@@ -144,7 +164,7 @@ const Option = React.memo(props => {
         onClick: () => onClick(value),
         onKeyDown: e => onKeyDown(e, value),
         children: [ icon && jsxRuntime.jsx("div", {
-            className: css_icon,
+            className: css.icon,
             children: jsxRuntime.jsx(Icon.Icon, {
                 name: icon,
                 fill: iconFill,
@@ -157,6 +177,6 @@ const Option = React.memo(props => {
             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, 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);
 
 Option.displayName = "TabOption", exports.TabBar = TabBar;

package/dist/cjs/chunks/{TextArea-Dj7jsvVr.js → TextArea-BnWOSrib.js}

@@ -1,13 +1,13 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Button = require("./Button-CuGvPAkH.js"), css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0", 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-CZ8Is2ry.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Button = require("./Button-DSFVBBSz.js"), css_wrapper = "TextArea-module_wrapper__O0sWP flexBox-module_columnStart__C7P44", css_textarea = "TextArea-module_textarea__-R2n0", 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%", 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 = {
         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, onChange: onChange = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onSubmit: onSubmit = () => null, onKeyDown: onKeyDown = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "value", "name", "width", "focused", "placeholder", "rows", "border", "borderRadius", "padding", "error", "resizable", "hasSend", "sendOffset", "sendSize", "returnSubmits", "backgroundColor", "bgColor", "minWidth", "textSize", "disabled", "submitClears", "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 = null != backgroundColor ? backgroundColor : bgColor, [isFocused, setIsFocused] = React.useState(focused), [text, setText] = React.useState(value), ref = React.useRef(null), handleResize = React.useCallback(() => {
+    }, 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 = tslib_es6.__rest(props, [ "value", "name", "width", "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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, [isFocused, setIsFocused] = React.useState(focused), [text, setText] = React.useState(value), ref = React.useRef(null), handleResize = React.useCallback(() => {
         (null == ref ? void 0 : ref.current) && (ref.current.style.height = "auto", ref.current.style.height = `${ref.current.scrollHeight}px`);
     }, []);
     React.useEffect(() => {
@@ -63,6 +63,7 @@ const TextArea = React.memo(props => {
             value: text,
             placeholder: placeholder,
             rows: rows,
+            maxLength: maxLength,
             disabled: disabled,
             onChange: e => handleChange(e.target.value),
             onInput: () => handleResize(),