@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/TabBar-2kQmtcwW.mjs

@@ -0,0 +1,214 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useMemo, useState, useRef, useCallback, createElement } from "react";
+
+import { motion } from "motion/react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { I as IconButton } from "./IconButton-oqYTUJit.mjs";
+
+import { u as useClientLayoutEffect, a as TabContext, w as withoutAria, T as Tab } from "./Tab-B8yJ9Qy4.mjs";
+
+var css = {
+    wrapper: "TabBar-module_wrapper__cyOR1",
+    list: "TabBar-module_list__4b33I",
+    indicator: "TabBar-module_indicator__2pk0F",
+    close: "TabBar-module_close__bvSBh",
+    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"
+};
+
+const TabBar = React.memo(function(rawProps) {
+    var _a, _b, _c, _d, _e, _f;
+    const _g = resolveColorProps(rawProps), {children: children, tabBarName: tabBarName, accentColor: accentColor, textColor: textColor, textColorSelected: textColorSelected, underlineColor: underlineColor, underlineSelectedColor: underlineSelectedColor, iconColor: iconColor, iconColorSelected: iconColorSelected, options: options = [], value: value, defaultValue: defaultValue, underline: underline = !0, border: border = !0, height: height = "auto", width: width = "100%", tabWidth: tabWidth = "compact", closeWidth: closeWidth = "auto", padding: padding = "var(--spacing-s)", iconSize: iconSize = 20, iconFill: iconFill = !1, iconGap: iconGap = 8, tabGap: tabGap = 8, disabled: disabled = !1, hasClose: hasClose = !1, justify: justify = "start", borderColor: borderColor = "var(--core-outline-secondary)", textSize: textSize = "m", transition: transition, onChange: onChange, onClose: onClose, onToolTip: onToolTip, className: className, style: style} = _g, attributes = __rest(_g, [ "children", "tabBarName", "accentColor", "textColor", "textColorSelected", "underlineColor", "underlineSelectedColor", "iconColor", "iconColorSelected", "options", "value", "defaultValue", "underline", "border", "height", "width", "tabWidth", "closeWidth", "padding", "iconSize", "iconFill", "iconGap", "tabGap", "disabled", "hasClose", "justify", "borderColor", "textSize", "transition", "onChange", "onClose", "onToolTip", "className", "style" ]), accessibleName = (null == tabBarName ? void 0 : tabBarName.trim()) || "Tabs", theme = useTheme(), reduced = usePrefersReducedMotion(), timing = useMemo(() => reduced ? {
+        type: "tween",
+        duration: 0,
+        delay: 0,
+        repeat: 0
+    } : getWaterTransition(theme.current.motion, transition), [ reduced, theme.current.motion, transition ]), [localValue, setLocalValue] = useState(() => {
+        var _a;
+        if (void 0 !== defaultValue) return defaultValue;
+        if (void 0 === children) return null === (_a = options.find(option => !option.disabled)) || void 0 === _a ? void 0 : _a.value;
+        const findFirst = nodes => {
+            for (const child of React.Children.toArray(nodes)) {
+                if (!React.isValidElement(child)) continue;
+                if (child.type === Tab && !child.props.disabled) return child.props.value;
+                const nested = findFirst(child.props.children);
+                if (void 0 !== nested) return nested;
+            }
+        };
+        return findFirst(children);
+    }), controlled = void 0 !== value, active = controlled ? value : localValue, listRef = useRef(null), entries = useRef(new Map), [revision, setRevision] = useState(0), [firstValue, setFirstValue] = useState(), [indicator, setIndicator] = useState(null), register = useCallback((element, option) => (entries.current.set(element, option), 
+    setRevision(n => n + 1), () => {
+        entries.current.delete(element), setRevision(n => n + 1);
+    }), []), select = useCallback(option => {
+        disabled || option.disabled || Object.is(active, option.value) || (controlled || setLocalValue(() => option.value), 
+        null == onToolTip || onToolTip(null), null == onChange || onChange(option.value, option));
+    }, [ disabled, active, controlled, onChange, onToolTip ]), enabledTabs = useCallback(() => {
+        var _a, _b;
+        return Array.from(null !== (_b = null === (_a = listRef.current) || void 0 === _a ? void 0 : _a.querySelectorAll('[role="tab"]')) && void 0 !== _b ? _b : []).filter(el => !el.disabled && entries.current.has(el));
+    }, []), navigate = useCallback(event => {
+        if (disabled) return;
+        const tabs = enabledTabs(), index = tabs.indexOf(event.currentTarget);
+        let next;
+        switch (event.key) {
+          case "ArrowRight":
+            next = (index + 1) % tabs.length;
+            break;
+
+          case "ArrowLeft":
+            next = (index - 1 + tabs.length) % tabs.length;
+            break;
+
+          case "Home":
+            next = 0;
+            break;
+
+          case "End":
+            next = tabs.length - 1;
+            break;
+
+          default:
+            return;
+        }
+        event.preventDefault();
+        const target = tabs[next];
+        if (target) {
+            target.focus();
+            const option = entries.current.get(target);
+            option && select(option);
+        }
+    }, [ disabled, enabledTabs, select ]);
+    useClientLayoutEffect(() => {
+        const first = enabledTabs()[0], firstOption = first && entries.current.get(first), selectedOption = enabledTabs().map(element => entries.current.get(element)).find(option => Object.is(null == option ? void 0 : option.value, active));
+        setFirstValue(() => {
+            var _a;
+            return null !== (_a = null == selectedOption ? void 0 : selectedOption.value) && void 0 !== _a ? _a : null == firstOption ? void 0 : firstOption.value;
+        }), !controlled && void 0 === active && firstOption && setLocalValue(() => firstOption.value);
+    }, [ revision, enabledTabs, controlled, active, disabled ]), useClientLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list) return;
+        const measure = () => {
+            var _a;
+            const target = null === (_a = Array.from(entries.current).find(([el, option]) => el.isConnected && !el.disabled && Object.is(option.value, active))) || void 0 === _a ? void 0 : _a[0];
+            if (!target || disabled || !underline) return void setIndicator(null);
+            const next = {
+                x: target.offsetLeft,
+                width: target.offsetWidth
+            };
+            setIndicator(previous => (null == previous ? void 0 : previous.x) === next.x && previous.width === next.width ? previous : next);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(list);
+        for (const element of entries.current.keys()) observer.observe(element);
+        return () => observer.disconnect();
+    }, [ revision, active, disabled, underline, children, options, padding, iconSize, iconGap, tabGap, tabWidth, textSize, width ]);
+    const colors = useMemo(() => ({
+        accentColor: accentColor,
+        textColor: textColor,
+        textColorSelected: textColorSelected,
+        underlineColor: underlineColor,
+        underlineSelectedColor: underlineSelectedColor,
+        iconColor: iconColor,
+        iconColorSelected: iconColorSelected
+    }), [ accentColor, textColor, textColorSelected, underlineColor, underlineSelectedColor, iconColor, iconColorSelected ]), selectedOption = Array.from(entries.current.values()).find(option => Object.is(option.value, active)), selectedAccent = null !== (_a = null == selectedOption ? void 0 : selectedOption.accentColor) && void 0 !== _a ? _a : accentColor, indicatorColor = null !== (_d = null !== (_c = null !== (_b = null == selectedOption ? void 0 : selectedOption.underlineSelectedColor) && void 0 !== _b ? _b : underlineSelectedColor) && void 0 !== _c ? _c : selectedAccent) && void 0 !== _d ? _d : "var(--core-text-special)", baselineColor = null !== (_f = null !== (_e = null == selectedOption ? void 0 : selectedOption.underlineColor) && void 0 !== _e ? _e : underlineColor) && void 0 !== _f ? _f : borderColor, context = useMemo(() => ({
+        value: active,
+        firstValue: firstValue,
+        iconFill: iconFill,
+        disabled: disabled,
+        register: register,
+        select: select,
+        navigate: navigate,
+        onToolTip: onToolTip,
+        colors: colors
+    }), [ active, firstValue, iconFill, disabled, register, select, navigate, onToolTip, colors ]), vars = {
+        "--tab-bar-height": setStyle(height),
+        "--tab-bar-width": setStyle(width),
+        "--tab-bar-gap": setStyle(tabGap),
+        "--tab-bar-padding": setStyle(padding),
+        "--tab-bar-icon-size": setStyle(iconSize),
+        "--tab-bar-icon-gap": setStyle(iconGap),
+        "--tab-bar-tab-width": "fill" === tabWidth ? "auto" : "compact" === tabWidth ? "max-content" : setStyle(tabWidth),
+        "--tab-bar-tab-flex": "fill" === tabWidth ? "1 1 0" : "compact" === tabWidth ? "0 1 auto" : "0 0 auto",
+        "--tab-bar-border": border ? "1px" : "0px",
+        "--tab-bar-border-color": baselineColor,
+        "--tab-bar-underline-selected-color": indicatorColor,
+        "--tab-bar-justify": "start" === justify ? "flex-start" : "end" === justify ? "flex-end" : "center",
+        "--tab-bar-close-width": setStyle(closeWidth)
+    };
+    return jsx(TabContext.Provider, {
+        value: context,
+        children: jsxs("div", {
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign({}, style), vars),
+            children: [ jsxs("div", Object.assign({}, withoutAria(attributes), {
+                ref: listRef,
+                role: "tablist",
+                "aria-label": accessibleName,
+                "aria-orientation": "horizontal",
+                "aria-disabled": disabled || void 0,
+                className: `${css.list} ${css[textSize]}`,
+                "data-icon-fill": iconFill || void 0,
+                children: [ void 0 !== children ? children : options.map((option, i) => {
+                    var _a;
+                    return createElement(Tab, Object.assign({}, option, {
+                        key: "string" == typeof option.value || "number" == typeof option.value ? `${typeof option.value}:${option.value}` : null !== (_a = option.id) && void 0 !== _a ? _a : i
+                    }));
+                }), indicator && jsx(motion.div, {
+                    "aria-hidden": "true",
+                    className: css.indicator,
+                    initial: !1,
+                    animate: indicator,
+                    transition: timing
+                }, reduced ? "static" : "animated") ]
+            })), hasClose && jsx("div", {
+                className: css.close,
+                children: jsx(IconButton, {
+                    actionName: "Close tabs",
+                    icon: "basic.cross",
+                    iconSize: Math.max(0, iconSize - 4),
+                    buttonSize: iconSize,
+                    disabled: disabled,
+                    onClick: onClose,
+                    iconFill: iconFill
+                })
+            }) ]
+        })
+    });
+});
+
+export { TabBar as T };

package/dist/esm/chunks/TextArea-C32MToPG.mjs

@@ -0,0 +1,201 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useId, useRef, useCallback, useState, useEffect, useLayoutEffect } from "react";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+var css = {
+    field: "TextArea-module_field__Tx6iH",
+    label: "TextArea-module_label__2TV89",
+    wrapper: "TextArea-module_wrapper__O0sWP",
+    textarea: "TextArea-module_textarea__-R2n0 scrollBars-module_scrollbars__c-ZPl",
+    resizeGrip: "TextArea-module_resizeGrip__TOC7J",
+    message: "TextArea-module_message__y0kVC",
+    sendSpace: "TextArea-module_sendSpace__dvtg9",
+    send: "TextArea-module_send__Cub13",
+    xs: "TextArea-module_xs__5e748 type-module_body-xs-regular__ZAFft",
+    s: "TextArea-module_s__Ac-fq type-module_body-s-regular__vRHSP",
+    m: "TextArea-module_m__dod4R type-module_body-m-regular__LuQBA",
+    l: "TextArea-module_l__-uLCG type-module_body-l-regular__lOYbg",
+    xl: "TextArea-module_xl__H6-7T type-module_body-xl-regular__pF2kC"
+};
+
+const useClientLayoutEffect = "undefined" == typeof window ? useEffect : useLayoutEffect, withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)), defaultSendOffset = {
+    bottom: 10,
+    right: 10
+};
+
+function TextAreaComponent(rawProps) {
+    var _a;
+    const props = resolveColorProps(rawProps), {value: value, inputRef: inputRef, defaultValue: defaultValue = "", name: name, inputName: inputName, inputId: inputId, inputAttributes: inputAttributes = {}, label: label, labelSize: labelSize = "m", labelColor: labelColor = "var(--core-text-primary)", width: width = "100%", height: height = "auto", maxHeight: maxHeight, minWidth: minWidth, rows: rows = 6, autoGrow: autoGrow = !0, focused: focused, placeholder: placeholder = "Enter text here...", padding: padding = "var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m)", borderStyle: borderStyle = "box", borderRadius: borderRadius = corners["corner-xs"], error: error = !1, errorMessage: errorMessage, tip: tip, borderColor: borderColor = "var(--core-outline-primary)", borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorError: borderColorError = "var(--feedback-warning)", backgroundColor: backgroundColor = "var(--core-surface-secondary)", resizable: resizable = !0, showSendButton: showSendButton = !1, sendActionName: sendActionName = "Send", sendOffset: sendOffset = defaultSendOffset, sendSize: sendSize = 36, returnSubmits: returnSubmits = !1, textSize: textSize = "m", textColor: textColor = "var(--core-text-primary)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-disabled)", textColorError: textColorError = "var(--feedback-warning)", disabled: disabled = !1, readOnly: readOnly = !1, submitClears: submitClears = !0, allowEmptySubmit: allowEmptySubmit = !1, maxLength: maxLength, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onSubmit: onSubmit, onKeyDown: onKeyDown, onPaste: onPaste, className: className, style: style} = props, divAttributes = __rest(props, [ "value", "inputRef", "defaultValue", "name", "inputName", "inputId", "inputAttributes", "label", "labelSize", "labelColor", "width", "height", "maxHeight", "minWidth", "rows", "autoGrow", "focused", "placeholder", "padding", "borderStyle", "borderRadius", "error", "errorMessage", "tip", "borderColor", "borderColorFocused", "borderColorError", "backgroundColor", "resizable", "showSendButton", "sendActionName", "sendOffset", "sendSize", "returnSubmits", "textSize", "textColor", "textColorDisabled", "textColorPlaceholder", "textColorError", "disabled", "readOnly", "submitClears", "allowEmptySubmit", "maxLength", "onChange", "onFocus", "onBlur", "onSubmit", "onKeyDown", "onPaste", "className", "style" ]), generatedId = useId(), id = inputId || generatedId, hasLabel = Boolean(null == label ? void 0 : label.trim()), message = null === (_a = error ? errorMessage : tip) || void 0 === _a ? void 0 : _a.trim(), messageId = `${id}-message`, ref = useRef(null), setInputRef = useCallback(element => {
+        if (ref.current = element, "function" == typeof inputRef) {
+            const cleanup = inputRef(element);
+            if ("function" == typeof cleanup) return () => {
+                ref.current = null, cleanup();
+            };
+        } else inputRef && (inputRef.current = element);
+    }, [ inputRef ]), wrapperRef = useRef(null), initialValue = useRef(defaultValue), [localText, setLocalText] = useState(defaultValue), [isFocused, setIsFocused] = useState(!1), controlled = void 0 !== value, text = controlled ? value : localText, canEdit = !disabled && !readOnly, canSubmit = canEdit && (Boolean(text.trim()) || allowEmptySubmit) && Boolean(onSubmit), growing = autoGrow && "auto" === height, nativeResizable = resizable && !growing && "auto" === height, rowCount = Number.isFinite(rows) ? Math.max(1, Math.floor(rows)) : 6, buttonSize = Number.isFinite(sendSize) ? Math.max(0, sendSize) : 36, bottomOffset = Number.isFinite(sendOffset.bottom) ? Math.max(0, sendOffset.bottom) : 10, rightOffset = Number.isFinite(sendOffset.right) ? Math.max(0, sendOffset.right) : 10, changeText = next => {
+        canEdit && (controlled || setLocalText(next), null == onChange || onChange(next));
+    }, submit = () => {
+        var _a;
+        canSubmit && (null == onSubmit || onSubmit(text), submitClears && changeText(""), 
+        null === (_a = ref.current) || void 0 === _a || _a.focus());
+    };
+    useEffect(() => {
+        var _a, _b;
+        disabled ? setIsFocused(!1) : void 0 !== focused && (focused ? null === (_a = ref.current) || void 0 === _a || _a.focus() : null === (_b = ref.current) || void 0 === _b || _b.blur());
+    }, [ focused, disabled ]), useEffect(() => {
+        var _a;
+        if (controlled) return;
+        const form = null === (_a = ref.current) || void 0 === _a ? void 0 : _a.form;
+        if (!form) return;
+        let mounted = !0;
+        const reset = event => queueMicrotask(() => {
+            mounted && !event.defaultPrevented && setLocalText(initialValue.current);
+        });
+        return form.addEventListener("reset", reset), () => {
+            mounted = !1, form.removeEventListener("reset", reset);
+        };
+    }, [ controlled, inputAttributes.form ]), useClientLayoutEffect(() => {
+        var _a;
+        const element = ref.current, wrapper = wrapperRef.current;
+        if (!element || !wrapper) return;
+        const measure = () => {
+            var _a, _b;
+            const styles = getComputedStyle(wrapper), resizeOffset = Math.max(0, Number.parseFloat(styles.paddingBottom) - Number.parseFloat(styles.paddingRight));
+            if (wrapper.style.setProperty("--ta-resize-offset", `${resizeOffset}px`), null === (_a = wrapper.parentElement) || void 0 === _a || _a.style.setProperty("--ta-message-left", styles.paddingLeft), 
+            null === (_b = wrapper.parentElement) || void 0 === _b || _b.style.setProperty("--ta-message-right", styles.paddingRight), 
+            !growing) return;
+            element.style.height = "auto";
+            const baseline = element.offsetHeight;
+            element.style.height = "0px";
+            const content = element.scrollHeight;
+            element.style.height = `${Math.max(baseline, content)}px`;
+        };
+        measure();
+        let previousWidth = wrapper.clientWidth;
+        const observer = new ResizeObserver(() => {
+            wrapper.clientWidth !== previousWidth && (previousWidth = wrapper.clientWidth, measure());
+        });
+        observer.observe(wrapper);
+        let mounted = !0;
+        return null === (_a = document.fonts) || void 0 === _a || _a.ready.then(() => {
+            mounted && measure();
+        }), () => {
+            mounted = !1, observer.disconnect(), growing && element.style.removeProperty("height");
+        };
+    }, [ growing, text, rowCount, width, height, maxHeight, minWidth, textSize, padding, showSendButton, resizable, sendSize, sendOffset, style, className ]), 
+    useClientLayoutEffect(() => {
+        const element = ref.current, wrapper = wrapperRef.current;
+        if (!nativeResizable || !element || !wrapper) return;
+        const positionGrip = () => {
+            wrapper.style.setProperty("--ta-grip-top", element.offsetTop + element.offsetHeight - 16 + "px"), 
+            wrapper.style.setProperty("--ta-grip-right", wrapper.clientWidth - element.offsetLeft - element.offsetWidth + "px");
+        };
+        positionGrip();
+        const observer = new ResizeObserver(positionGrip);
+        return observer.observe(element), observer.observe(wrapper), () => observer.disconnect();
+    }, [ nativeResizable, padding, style ]);
+    const getBorderColor = () => error ? borderColorError : isFocused ? borderColorFocused : borderColor, getResize = () => !resizable || growing || "auto" !== height ? "none" : "vertical", cssVars = {
+        "--ta-height": setStyle(height),
+        "--ta-max-height": setStyle(maxHeight, "none"),
+        "--ta-padding": setStyle(padding),
+        "--ta-border-radius": setStyle(borderRadius),
+        "--ta-bg-color": backgroundColor,
+        "--ta-box-shadow": "none" === borderStyle ? "none" : "underline" === borderStyle ? `0 1px 0 0 ${getBorderColor()}` : `0 0 0 1px ${getBorderColor()}`,
+        "--ta-text-color": disabled ? textColorDisabled : textColor,
+        "--ta-placeholder-color": textColorPlaceholder,
+        "--ta-label-color": disabled ? textColorDisabled : labelColor,
+        "--ta-send-bottom": `${bottomOffset}px`,
+        "--ta-send-right": `${rightOffset}px`,
+        "--ta-send-size": `${buttonSize}px`,
+        "--ta-resize": getResize()
+    };
+    return jsxs("div", {
+        className: css.field,
+        style: Object.assign({
+            width: setStyle(width),
+            minWidth: setStyle(minWidth, "0px")
+        }, cssVars),
+        children: [ hasLabel && jsx("label", {
+            htmlFor: id,
+            className: `${css.label} ${css[labelSize]}`,
+            children: label
+        }), jsxs("div", Object.assign({}, withoutAria(divAttributes), {
+            ref: wrapperRef,
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign({}, style), cssVars),
+            children: [ jsx("textarea", Object.assign({}, withoutAria(inputAttributes), {
+                ref: setInputRef,
+                id: id,
+                name: name,
+                className: `${css.textarea} ${css[textSize]}`,
+                "data-resizable": "vertical" === getResize() || void 0,
+                value: text,
+                placeholder: placeholder,
+                "aria-label": (null == inputName ? void 0 : inputName.trim()) ? inputName.trim() : hasLabel ? void 0 : (null == name ? void 0 : name.trim()) || "Text input",
+                "aria-invalid": error || void 0,
+                "aria-describedby": message ? messageId : void 0,
+                rows: rowCount,
+                maxLength: maxLength,
+                disabled: disabled,
+                readOnly: readOnly,
+                onChange: event => changeText(event.currentTarget.value),
+                onFocus: event => {
+                    setIsFocused(!0), null == onFocus || onFocus(event.currentTarget.value);
+                },
+                onBlur: event => {
+                    setIsFocused(!1), null == onBlur || onBlur(event.currentTarget.value);
+                },
+                onPaste: event => {
+                    canEdit && (null == onPaste || onPaste(event));
+                },
+                onKeyDown: event => {
+                    null == onKeyDown || onKeyDown(event), event.defaultPrevented || !canEdit || !returnSubmits || !onSubmit || "Enter" !== event.key || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || 229 === event.nativeEvent.keyCode || (event.preventDefault(), 
+                    submit());
+                }
+            })), nativeResizable && jsx("span", {
+                className: css.resizeGrip,
+                "aria-hidden": "true"
+            }), showSendButton && jsx("div", {
+                className: css.sendSpace,
+                children: jsx("button", {
+                    type: "button",
+                    className: css.send,
+                    "aria-label": sendActionName.trim() || "Send",
+                    disabled: !canSubmit,
+                    onMouseDown: event => event.preventDefault(),
+                    onClick: submit,
+                    children: jsx(Icon, {
+                        name: "arrows.arrow-top",
+                        size: 20,
+                        "aria-hidden": "true",
+                        strokeColor: "var(--core-text-light)"
+                    })
+                })
+            }) ]
+        })), message && jsx("div", {
+            id: messageId,
+            className: `${css.message} ${css.xs}`,
+            style: {
+                color: error ? textColorError : "var(--core-text-tertiary)"
+            },
+            children: message
+        }) ]
+    });
+}
+
+TextAreaComponent.displayName = "TextArea";
+
+const TextArea = React.memo(TextAreaComponent);
+
+export { TextArea as T };