@apple-pie/slice 0.0.0 → 0.0.2

package/dist/cjs/chunks/Switch-CtkFtogd.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+var React = require('react');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Switch-module_wrapper__OqM0E {\n\tpadding: var(--switch-padding) !important;\n\twidth: var(--switch-width);\n\theight: var(--switch-height);\n\tborder-radius: 100px;\n\tcursor: pointer;\n\tbackground: var(--switch-bg-color);\n\ttransition: background 0.25s ease-in-out 0s;\n}\n\n.Switch-module_knob__BLGda {\n\twidth: var(--switch-knob-size);\n\theight: var(--switch-knob-size);\n\tbackground: var(--switch-knob-color);\n\tborder-radius: 100%;\n}\n";
+var css = {"wrapper":"Switch-module_wrapper__OqM0E flexBox-module_row__PWxbe","knob":"Switch-module_knob__BLGda flexBox-module_row__PWxbe"};
+styleInject_es.styleInject(css_248z);
+
+const Switch = React.memo((props) => {
+    const { state = false, height = 22, width = 44, padding = 3, bgColorOn = 'var(--feedback-positive)', bgColorOff = 'var(--core-text-disabled)', knobColor = 'var(--core-surface-primary)', onChange = () => null } = props, divAttributes = tslib_es6.__rest(props, ["state", "height", "width", "padding", "bgColorOn", "bgColorOff", "knobColor", "onChange"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [on, setOn] = React.useState(state);
+    // Sync with prop changes
+    React.useEffect(() => {
+        setOn(state);
+    }, [state]);
+    const handleClick = React.useCallback(() => {
+        setOn(!on);
+        onChange(!on);
+    }, [on, onChange]);
+    // Memoize style object
+    const justify = React.useMemo(() => ({ justifyContent: on ? 'flex-end' : 'flex-start' }), [on]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--switch-width': `${width}px`,
+            '--switch-height': `${height}px`,
+            '--switch-padding': `${padding}px`,
+            '--switch-knob-size': `${height - padding * 2}px`,
+            '--switch-knob-color': knobColor,
+            '--switch-bg-color': on ? bgColorOn : bgColorOff,
+        };
+    }, [width, height, padding, bgColorOff, bgColorOn, on, knobColor]);
+    return (jsxRuntime.jsx(react.motion.div, Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign(Object.assign({}, divStyle), justify), cssVars), onClick: handleClick }, rest, { children: jsxRuntime.jsx(react.motion.div, { className: css.knob, layout: 'preserve-aspect' }) })));
+});
+
+exports.Switch = Switch;

package/dist/cjs/chunks/TabBar-D3bj4pjj.js

@@ -0,0 +1,176 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks_useTheme = require('../hooks/useTheme.js');
+require('../theme/colors.js');
+require('../hooks/useWindow.js');
+var Badge = require('./Badge-CMapJCij.js');
+var _types = require('./_types-CoWzQFsT.js');
+var IconButton = require('./IconButton-BfsPlKTb.js');
+var sharedTypes = require('./sharedTypes-BvTjh6M5.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.TabBar-module_wrapper__z8Cvg {\n\tgap: var(--tab-bar-gap);\n\tborder-bottom: var(--tab-bar-border-bottom) solid var(--core-outline-primary);\n\theight: var(--tab-bar-height);\n\twidth: var(--tab-bar-width);\n\tcursor: pointer;\n}\n\n.TabBar-module_option__Og-E4 {\n\tgap: var(--tab-bar-option-gap);\n\tcolor: var(--tab-bar-option-color);\n\tpadding: var(--tab-bar-option-padding) !important;\n\theight: 100%;\n\twidth: var(--tab-bar-option-width);\n\tflex: var(--tab-bar-option-flex);\n\twhite-space: nowrap;\n\tbox-shadow: 0 var(--tab-bar-option-border) 0 0 var(--core-text-special);\n\tcursor: var(--tab-bar-option-cursor);\n\t-webkit-user-select: none;\n\tuser-select: none;\n}\n\n.TabBar-module_icon__LU5Rp {\n\tmax-height: var(--tab-bar-icon-size);\n\tmin-height: var(--tab-bar-icon-size);\n\tmax-width: var(--tab-bar-icon-size);\n\tmin-width: var(--tab-bar-icon-size);\n}\n\n.TabBar-module_close__ytzs5 {\n\theight: 100%;\n\tpadding: var(--tab-bar-close-padding) !important;\n\tborder-left: 1px solid var(--core-outline-primary);\n\twidth: min-content;\n}\n";
+var css = {"wrapper":"TabBar-module_wrapper__z8Cvg flexBox-module_rowStart__nJZnW","option":"TabBar-module_option__Og-E4 flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G","icon":"TabBar-module_icon__LU5Rp flexBox-module_row__PWxbe","close":"TabBar-module_close__ytzs5 flexBox-module_row__PWxbe"};
+styleInject_es.styleInject(css_248z);
+
+const placeholderOptions = [
+    { name: 'Option 1', value: 'Option 1', icon: null },
+    { name: 'Option 2', value: 'Option 2', icon: 'wallet' },
+];
+
+const TabBar = React.memo((props) => {
+    const { options = placeholderOptions, selected = 0, border = true, underline = true, height = '100%', width = '100%', tabWidth = 'distribute', padding = 8, iconSize = 20, iconGap = 8, tabGap = 0, disabled = false, hasClose = false, closeWidth = 'auto', selectedValue = null, onChange = () => null, onTabChange = () => null, onClose = () => null, onToolTip = () => null } = props, divAttributes = tslib_es6.__rest(props, ["options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "onChange", "onTabChange", "onClose", "onToolTip"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [index, setIndex] = React.useState(selected);
+    React.useEffect(() => {
+        let selectedIndex = 0;
+        if (selectedValue && options) {
+            selectedIndex = options.findIndex((option) => option.value === selectedValue);
+            setIndex(selectedIndex === -1 ? selected : selectedIndex);
+        }
+        else {
+            setIndex(selected);
+        }
+    }, [selected, selectedValue, options]);
+    // memo handleClick
+    const handleClick = React.useCallback((i) => {
+        setIndex(i);
+        onChange(i);
+        onTabChange(options[i]);
+    }, [onChange, onTabChange, options]);
+    // memo handleOptionClick
+    const handleOptionClick = React.useCallback((i) => {
+        onToolTip(null);
+        handleClick(i);
+    }, [onToolTip, handleClick]);
+    // memo rendered options
+    const renderedOptions = React.useMemo(() => options.map((option, i) => (jsxRuntime.jsx(Option, { label: option.name, value: i, showToolTip: option.toolTip, selected: i === index, padding: padding, icon: option.icon, iconSize: iconSize, iconGap: iconGap, disabled: disabled, count: option.count, onClick: handleOptionClick, onToolTip: onToolTip, underline: underline, tabWidth: tabWidth }, `${i}_option_${option.name}`))), [
+        options,
+        index,
+        padding,
+        iconSize,
+        iconGap,
+        disabled,
+        underline,
+        tabWidth,
+        onToolTip,
+        handleOptionClick,
+    ]);
+    const setStyle = React.useCallback((value) => {
+        if (typeof value === 'string')
+            return value;
+        return `${value}px`;
+    }, []);
+    const cssVars = React.useMemo(() => {
+        return {
+            '--tab-bar-gap': `${tabGap}px`,
+            '--tab-bar-height': `${setStyle(height)}px`,
+            '--tab-bar-width': setStyle(width),
+            '--tab-bar-border-bottom': `${border ? '1px' : '0'}`,
+            '--tab-bar-close-width': `${closeWidth}px`,
+            '--tab-bar-close-padding': padding ? `${padding}px` : '8px',
+        };
+    }, [tabGap, height, width, border, setStyle, closeWidth, padding]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars) }, rest, { children: [renderedOptions, hasClose && (jsxRuntime.jsx("div", { className: css.close, children: jsxRuntime.jsx(IconButton.IconButton, { iconSize: iconSize - 4, frameSize: iconSize, toggle: false, hover: true, icon: 'x', onClick: onClose }) }))] })));
+});
+TabBar.displayName = 'TabBar';
+const Option = React.memo((props) => {
+    const theme = hooks_useTheme.useTheme();
+    const { label = 'Option', value = 0, icon = null, selected = false, onClick = () => null, onToolTip = () => null, padding = 8, iconSize = 20, iconGap = 6, disabled = false, showToolTip = null, underline = true, tabWidth = 'distribute', count = 0, } = props;
+    const ref = React.useRef(null);
+    // memo icon color
+    const strokeColor = React.useMemo(() => {
+        if (!disabled && selected)
+            return theme.current.colors['core-text-special'];
+        if (disabled)
+            return theme.current.colors['core-text-disabled'];
+        return theme.current.colors['core-text-primary'];
+    }, [disabled, selected, theme]);
+    // memo handleMouseOver
+    const handleMouseOver = React.useCallback((e) => {
+        onToolTip(null);
+        if (showToolTip && ref.current) {
+            const tip = {
+                type: sharedTypes.ToolTipType.button,
+                payload: { label: showToolTip },
+                event: e,
+                ref,
+            };
+            onToolTip(tip);
+        }
+    }, [showToolTip, onToolTip]);
+    // memo handleMouseLeave
+    const handleMouseLeave = React.useCallback(() => {
+        if (showToolTip)
+            onToolTip(null);
+    }, [showToolTip, onToolTip]);
+    // memo color
+    const textColor = React.useMemo(() => {
+        if (disabled)
+            return 'var(--core-text-disabled)';
+        if (selected)
+            return 'var(--core-text-special)';
+        return 'var(--core-text-primary)';
+    }, [disabled, selected]);
+    // memo tab width
+    const setTabWidth = React.useMemo(() => {
+        if (tabWidth === 'min-content')
+            return 'min-content';
+        if (tabWidth === 'distribute')
+            return 'unset';
+        return `${tabWidth}px`;
+    }, [tabWidth]);
+    // memo flex tab
+    const setTabFlex = React.useMemo(() => {
+        if (tabWidth === 'distribute')
+            return '1';
+        return 'unset';
+    }, [tabWidth]);
+    // memo underline
+    const setUnderline = React.useMemo(() => {
+        if (selected && underline && !disabled)
+            return '1px';
+        return '0';
+    }, [underline, disabled, selected]);
+    const cssVars = React.useMemo(() => {
+        return {
+            '--tab-bar-option-border': setUnderline,
+            '--tab-bar-option-padding': `${padding}px`,
+            '--tab-bar-option-icon-size': `${iconSize}px`,
+            '--tab-bar-option-cursor': disabled ? 'default' : 'pointer',
+            '--tab-bar-option-gap': `${iconGap !== null && iconGap !== void 0 ? 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,
+    ]);
+    return (jsxRuntime.jsxs("div", { className: css.option, style: cssVars, ref: ref, "aria-selected": selected, onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, onClick: () => onClick(value), onKeyDown: () => onClick(value), children: [icon && (jsxRuntime.jsx("div", { className: css.icon, children: jsxRuntime.jsx(_types.Icon, { name: icon, size: iconSize, strokeColor: strokeColor }) })), label, count !== 0 && (jsxRuntime.jsx(Badge.Badge, { variant: 'light', hideNull: false, count: count }))] }));
+}, (prevProps, nextProps) => {
+    // Custom comparison for performance
+    return (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);
+});
+Option.displayName = 'TabOption';
+
+exports.TabBar = TabBar;

package/dist/cjs/chunks/TextArea-B1oKK3_b.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var UIButton = require('./UIButton-CH4p-8yq.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.TextArea-module_wrapper__vgfIH {\n\tposition: relative;\n\tpadding: var(--ta-padding) !important;\n\twidth: var(--ta-width);\n\theight: auto;\n\tborder-radius: var(--ta-border-radius);\n\tbackground-color: var(--ta-bg-color);\n\tbox-shadow: 0 0 0 1px var(--ta-border-color);\n\ttransition: all 0.25s ease-in-out 0s;\n}\n\n.TextArea-module_textarea__eAcFn {\n\tborder: 0;\n\toutline: 0;\n\tpadding: 0 16px 0 0;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--core-text-primary);\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\tresize: var(--ta-resize);\n\n\t&:disabled {\n\t\tcolor: var(--core-text-disabled);\n\t}\n\n\t&::placeholder {\n\t\tcolor: var(--core-text-disabled);\n\t}\n\n\toverflow-y: auto;\n\n\t&::-webkit-scrollbar {\n\t\tbackground-color: transparent;\n\t\twidth: 14px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: transparent;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: var(--scroll-bar);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--core-surface-primary);\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground-color: var(--scroll-bar);\n\t\tborder-radius: 20px;\n\t\tborder: 4px solid var(--core-surface-primary);\n\t\tcursor: default;\n\t}\n}\n\n.TextArea-module_actions__hA93N {\n\twidth: 100%;\n\tmin-height: 30px;\n\tcolor: var(--core-text-disabled);\n\tgap: 16px;\n}\n\n.TextArea-module_option__DDx9A {\n\tgap: 4px;\n\twhite-space: nowrap;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tcursor: default;\n}\n\n.TextArea-module_send__SUUqB {\n\tposition: absolute;\n\tbottom: var(--ta-send-icon-offset-bottom);\n\tright: var(--ta-send-icon-offset-right);\n}\n\n.TextArea-module_s__53cFy {\n}\n\n.TextArea-module_m__TtgeD {\n}\n\n.TextArea-module_l__u69gT {\n}\n";
+var css = {"wrapper":"TextArea-module_wrapper__vgfIH flexBox-module_columnStart__Kg8cV","textarea":"TextArea-module_textarea__eAcFn","send":"TextArea-module_send__SUUqB","s":"TextArea-module_s__53cFy type-module_body-s-regular__8-FO-","m":"TextArea-module_m__TtgeD type-module_body-m-regular__Qtp5G","l":"TextArea-module_l__u69gT type-module_body-l-regular__Ar4d3"};
+styleInject_es.styleInject(css_248z);
+
+const TextArea = React.memo((props) => {
+    const { value = '', name = 'text_area', width = '100%', focused = false, placeholder = 'Enter text here...', rows = 6, border = false, borderRadius = 4, padding = '16px 4px 16px 16px', validate = false, resizable = true, hasSend = false, sendOffset = { bottom: 6, right: 6 }, sendSize = 36, returnSubmits = false, bgColor = undefined, minWidth = undefined, textSize = 'm', disabled = false, submitClears = true, onChange = () => null, onFocus = () => null, onBlur = () => null, onValidate = () => null, onSubmit = () => null, onKeyDown = () => null } = props, divAttributes = tslib_es6.__rest(props, ["value", "name", "width", "focused", "placeholder", "rows", "border", "borderRadius", "padding", "validate", "resizable", "hasSend", "sendOffset", "sendSize", "returnSubmits", "bgColor", "minWidth", "textSize", "disabled", "submitClears", "onChange", "onFocus", "onBlur", "onValidate", "onSubmit", "onKeyDown"]);
+    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [isFocused, setIsFocused] = React.useState(focused);
+    const [invalid, setInvalid] = React.useState(false);
+    const [text, setText] = React.useState(value);
+    const [initiated, setInitiated] = React.useState(false);
+    const ref = React.useRef(null);
+    // update text area height
+    const handleResize = React.useCallback(() => {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
+            return;
+        ref.current.style.height = 'auto';
+        ref.current.style.height = `${ref.current.scrollHeight}px`;
+    }, []);
+    // validate content
+    const runValidation = React.useCallback((content) => {
+        let valid = true;
+        if (validate && content.length < 1)
+            valid = false;
+        if (!initiated)
+            valid = true;
+        onValidate(valid);
+        return !valid;
+    }, [initiated, onValidate, validate]);
+    // focus / blur field on prop change
+    React.useEffect(() => {
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            if (focused)
+                ref.current.focus();
+            else
+                ref.current.blur();
+            setIsFocused(focused);
+        }
+    }, [focused]);
+    // update value on prop change
+    React.useEffect(() => {
+        if (value) {
+            setText(value);
+            setInvalid(runValidation(value));
+        }
+    }, [value, runValidation]);
+    // update height based on rows value
+    // biome-ignore lint/correctness/useExhaustiveDependencies: update heigt on rows change
+    React.useEffect(() => {
+        handleResize();
+    }, [rows]);
+    // update value
+    const handleChange = React.useCallback((content) => {
+        onChange(content);
+        setText(content);
+        setInvalid(runValidation(content));
+    }, [onChange, runValidation]);
+    // set focus
+    const handleFocus = React.useCallback(() => {
+        if (ref === null || ref === void 0 ? void 0 : ref.current)
+            ref.current.focus();
+        setInitiated(true);
+        setIsFocused(true);
+        onFocus();
+    }, [onFocus]);
+    // set blur
+    const handleBlur = React.useCallback((content) => {
+        handleChange(content);
+        setIsFocused(false);
+        onBlur();
+    }, [handleChange, onBlur]);
+    // trigger submit as needed
+    const handleSubmit = React.useCallback((e) => {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        handleFocus();
+        onSubmit(text);
+        if (submitClears)
+            setText('');
+        if (ref === null || ref === void 0 ? void 0 : ref.current)
+            ref.current.value = '';
+        handleResize();
+    }, [handleFocus, onSubmit, text, submitClears, handleResize]);
+    // handle return key
+    const handleKeyDownWrapper = React.useCallback((e) => {
+        if (returnSubmits && e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleSubmit(undefined);
+        }
+        onKeyDown(e);
+    }, [returnSubmits, handleSubmit, onKeyDown]);
+    // set style value
+    const setStyleValue = React.useCallback((value) => {
+        if (typeof value === 'string')
+            return value;
+        return `${value}px`;
+    }, []);
+    // memo border color
+    const setBorderColor = React.useMemo(() => {
+        if (isFocused)
+            return 'var(--core-link-primary)';
+        if (validate && invalid)
+            return 'var(--feedback-warning)';
+        return border ? 'var(--core-outline-primary)' : 'transparent';
+    }, [isFocused, invalid, validate, border]);
+    // memo text size
+    const textClassName = React.useMemo(() => {
+        if (textSize === 'l')
+            return css.l;
+        if (textSize === 'm')
+            return css.m;
+        return css.s;
+    }, [textSize]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--ta-border-radius': `${borderRadius}px`,
+            '--ta-width': `${setStyleValue(width)}`,
+            '--ta-min-width': minWidth ? `${minWidth}px` : 'unset',
+            '--ta-bg-color': bgColor !== null && bgColor !== void 0 ? bgColor : 'var(--core-surface-secondary)',
+            '--ta-border-color': setBorderColor,
+            '--ta-padding': `${setStyleValue(padding)}`,
+            '--ta-send-icon-offset-bottom': `${sendOffset.bottom}px`,
+            '--ta-send-icon-offset-right': `${sendOffset.right}px`,
+            '--ta-send-icon-size': `${sendSize}px`,
+            '--ta-resize': resizable ? 'vertical' : 'none',
+        };
+    }, [
+        width,
+        minWidth,
+        bgColor,
+        setBorderColor,
+        padding,
+        sendOffset,
+        sendSize,
+        setStyleValue,
+        borderRadius,
+        resizable,
+    ]);
+    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars), onBlur: () => handleBlur(text), onFocus: () => handleFocus() }, rest, { children: [hasSend && (jsxRuntime.jsx("div", { className: css.send, onMouseDown: (e) => handleSubmit(e), children: jsxRuntime.jsx(UIButton.UIButton, { iconLeft: 'arrow up', size: 'medium', variant: 'solid', round: true }) })), jsxRuntime.jsx("textarea", { className: `${css.textarea} ${textClassName}`, ref: ref, name: name, value: text, placeholder: placeholder, rows: rows, disabled: disabled, onChange: (e) => handleChange(e.target.value), onInput: () => handleResize(), onKeyDown: (e) => handleKeyDownWrapper(e) })] })));
+});
+
+exports.TextArea = TextArea;