@apple-pie/slice 0.0.6 → 0.0.7

package/dist/esm/chunks/Slider-C3A8GCfH.mjs

@@ -0,0 +1,142 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React, { useRef, useMemo, useCallback, useEffect } from "react";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
+
+import { p as pointerPosition } from "./utils-BQ1v7VE4.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+/**
+ * General debounce utility with delay setting and cancel/flush methods
+ * to clear a "debounce" or immediately "execute" the debounced function
+ */ var css_wrapper = "Slider-module_wrapper__ju4N2", css_track = "Slider-module_track__XogMe flexBox-module_rowStart__nJZnW", css_trackHead = "Slider-module_trackHead__Ka3pu", css_trackBg = "Slider-module_trackBg__4z7Pt flexBox-module_rowStart__nJZnW";
+
+styleInject(".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.Slider-module_wrapper__ju4N2 {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: var(--slider-padding);\n\tmargin: 0;\n\twidth: var(--slider-width);\n\theight: var(--slider-height);\n\tmin-height: var(--slider-touch-height);\n\tcursor: var(--slider-cursor);\n}\n\n.Slider-module_track__XogMe {\n\tposition: relative;\n\twidth: 0;\n\theight: 100%;\n\tbackground-color: var(--slider-progress-color);\n\toverflow: visible;\n\tpointer-events: none;\n\tborder-radius: 100px;\n}\n\n.Slider-module_trackHead__Ka3pu {\n\tposition: absolute;\n\tdisplay: var(--slider-head-display);\n\tbackground-color: var(--slider-head-color);\n\tpointer-events: none;\n\tborder-radius: var(--slider-head-radius);\n\tmax-width: var(--slider-head-width);\n\tmax-height: var(--slider-head-size);\n\tmin-width: var(--slider-head-width);\n\tmin-height: var(--slider-head-size);\n\ttop: 50%;\n\ttransform: translateY(-50%) translateX(-50%);\n}\n\n.Slider-module_trackBg__4z7Pt {\n\twidth: 100%;\n\theight: var(--slider-height);\n\tbackground-color: var(--slider-track-color);\n\tpointer-events: none;\n\tborder-radius: 100px;\n}\n");
+
+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, headType: headType = "round", trackHeadWidth: trackHeadWidth = 4, cursor: cursor = "default", headColor: headColor = "var(--core-text-primary)", trackColor: trackColor = "var(--core-surface-secondary)", progressColor: progressColor = "var(--core-text-primary)", onChange: onChange = () => null, onDragChange: onDragChange = () => null} = props, divAttributes = __rest(props, [ "value", "scaleMin", "scaleMax", "width", "height", "touchHeight", "trackHeadSize", "headType", "trackHeadWidth", "cursor", "headColor", "trackColor", "progressColor", "onChange", "onDragChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = useRef(null), track = useRef(null), head = useRef(null), absProgressRef = useRef(value), relativeProgressRef = useRef(value / scaleMax), didMount = useRef(!1), size = useObserveResize(ref, {
+        ignore: "height"
+    }), debouncedOnChange = function(func, delay) {
+        let timeoutId = null, lastArgs = null;
+        const debounced = function(...args) {
+            lastArgs = args, null !== timeoutId && clearTimeout(timeoutId), timeoutId = setTimeout(() => {
+                func.apply(this, null != lastArgs ? lastArgs : []), timeoutId = null, lastArgs = null;
+            }, delay);
+        };
+        return debounced.cancel = () => {
+            null !== timeoutId && (clearTimeout(timeoutId), timeoutId = null, lastArgs = null);
+        }, debounced.flush = function() {
+            null !== timeoutId && null !== lastArgs && (clearTimeout(timeoutId), func.apply(this, lastArgs), 
+            timeoutId = null, lastArgs = null);
+        }, debounced;
+    }((value, percent) => {
+        onChange(value, percent);
+    }, 0), padding = useMemo(() => "none" !== headType && trackHeadSize ? trackHeadSize / 2 : 0, [ headType, trackHeadSize ]), setTrackAndHead = useCallback((pixelPos, max = !1) => {
+        const tr = track.current, hd = head.current;
+        let adjustment = 0;
+        0 === pixelPos && (adjustment = padding), max && (adjustment = -padding), tr && hd && (tr.style.width = `${pixelPos}px`, 
+        hd.style.left = `${pixelPos - padding + adjustment}px`), didMount.current = !0;
+    }, [ padding ]), initialProgress = useCallback(current => {
+        if (!(null == ref ? void 0 : ref.current)) return;
+        const sliderWidth = ref.current.getBoundingClientRect().width;
+        let adjustedCurrent = current;
+        (adjustedCurrent > scaleMax || adjustedCurrent < scaleMin) && (console.warn("Slider outside range. Adjusted to mid point."), 
+        adjustedCurrent = (scaleMax - scaleMin) / 2);
+        const normalized = (adjustedCurrent - scaleMin) / (scaleMax - scaleMin), pixelPos = normalized * sliderWidth;
+        absProgressRef.current = adjustedCurrent, relativeProgressRef.current = normalized;
+        const max = 1 === relativeProgressRef.current;
+        setTrackAndHead(pixelPos, max), didMount.current = !0;
+    }, [ scaleMax, scaleMin, setTrackAndHead ]), progress = useCallback(posX => {
+        const el = null == ref ? void 0 : ref.current;
+        if (!el) return {
+            value: 0,
+            percent: 0
+        };
+        const sliderWidth = el.getBoundingClientRect().width;
+        relativeProgressRef.current = posX / sliderWidth, absProgressRef.current = scaleMin + relativeProgressRef.current * (scaleMax - scaleMin);
+    }, [ scaleMax, scaleMin ]), updateSlider = useCallback(e => {
+        const newPos = pointerPosition(e), el = null == ref ? void 0 : ref.current;
+        if (!el) return 0;
+        const rect = el.getBoundingClientRect(), sliderWidth = rect.width;
+        let pos = newPos - rect.x;
+        pos > sliderWidth - padding ? pos = sliderWidth : pos < padding && (pos = 0);
+        return setTrackAndHead(pos, pos === sliderWidth), pos;
+    }, [ setTrackAndHead, padding ]), handleMouseMove = useCallback(e => {
+        e.preventDefault();
+        if (null == ref ? void 0 : ref.current) {
+            const pos = updateSlider(e);
+            progress(pos), debouncedOnChange(absProgressRef.current, relativeProgressRef.current);
+        }
+    }, [ progress, updateSlider, debouncedOnChange ]), handleMouseUp = useCallback(e => {
+        e.preventDefault();
+        if (null == ref ? void 0 : ref.current) {
+            const pos = updateSlider(e);
+            progress(pos), debouncedOnChange.cancel(), onDragChange(absProgressRef.current, relativeProgressRef.current), 
+            onChange(absProgressRef.current, relativeProgressRef.current);
+        }
+        globalThis.removeEventListener("mousemove", handleMouseMove, !1), globalThis.removeEventListener("touchmove", handleMouseMove, !1), 
+        globalThis.removeEventListener("mouseup", handleMouseUp, !1), globalThis.removeEventListener("touchend", handleMouseUp, !1);
+    }, [ handleMouseMove, progress, updateSlider, debouncedOnChange, onDragChange, onChange ]), handleMouseDown = useCallback(e => {
+        e.preventDefault(), e.stopPropagation(), globalThis.addEventListener("mousemove", handleMouseMove, !1), 
+        globalThis.addEventListener("touchmove", handleMouseMove, !1), globalThis.addEventListener("mouseup", handleMouseUp, !1), 
+        globalThis.addEventListener("touchend", handleMouseUp, !1);
+        if (null == ref ? void 0 : ref.current) {
+            const pos = updateSlider(e);
+            progress(pos), debouncedOnChange.cancel(), onChange(absProgressRef.current, relativeProgressRef.current), 
+            onDragChange(absProgressRef.current, relativeProgressRef.current);
+        }
+    }, [ handleMouseMove, handleMouseUp, onChange, onDragChange, progress, updateSlider, debouncedOnChange ]);
+    useEffect(() => {
+        didMount.current && value === absProgressRef.current || initialProgress(value);
+    }, [ value, initialProgress ]), useEffect(() => {
+        const el = null == ref ? void 0 : ref.current;
+        return null == el || el.addEventListener("mousedown", handleMouseDown, !1), null == el || el.addEventListener("touchstart", handleMouseDown, !1), 
+        () => {
+            null == el || el.removeEventListener("mousedown", handleMouseDown, !1), null == el || el.removeEventListener("touchstart", handleMouseDown, !1);
+        };
+    }, [ handleMouseDown ]), useEffect(() => {
+        var _a;
+        const sliderWidth = null === (_a = null == ref ? void 0 : ref.current) || void 0 === _a ? void 0 : _a.offsetWidth;
+        if (!sliderWidth || 0 === size.width) return;
+        const max = 1 === relativeProgressRef.current;
+        setTrackAndHead(relativeProgressRef.current * sliderWidth, max);
+    }, [ size.width, setTrackAndHead ]);
+    const trackHeadColor = useMemo(() => "none" === headType ? "transparent" : null != headColor ? headColor : "var(--core-text-primary)", [ headColor, headType ]), headSize = useMemo(() => "none" === headType ? height : trackHeadSize, [ trackHeadSize, headType, height ]), headWidth = useMemo(() => "round" === headType ? trackHeadSize : trackHeadWidth, [ headType, trackHeadSize, trackHeadWidth ]), setWidth = useMemo(() => width && "string" == typeof width ? "auto" === width ? "100%" : width : `${null != width ? width : 100}px`, [ width ]), cssVars = useMemo(() => ({
+        "--slider-padding": `${padding}px`,
+        "--slider-width": setWidth,
+        "--slider-height": `${height}px`,
+        "--slider-touch-height": `${touchHeight}px`,
+        "--slider-cursor": cursor,
+        "--slider-head-display": height ? "block" : "none",
+        "--slider-head-radius": "round" === headType ? "100%" : "0px",
+        "--slider-head-size": `${headSize}px`,
+        "--slider-head-width": `${headWidth}px`,
+        "--slider-head-color": trackHeadColor,
+        "--slider-progress-color": null != progressColor ? progressColor : "var(--core-text-primary)",
+        "--slider-track-color": null != trackColor ? trackColor : "var(--core-surface-secondary)"
+    }), [ padding, height, touchHeight, cursor, headWidth, progressColor, trackColor, headSize, trackHeadColor, headType, setWidth ]);
+    return jsx("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        ref: ref
+    }, rest, {
+        children: jsx("div", {
+            className: css_trackBg,
+            children: jsx("div", {
+                className: css_track,
+                ref: track,
+                children: jsx("div", {
+                    className: css_trackHead,
+                    ref: head
+                })
+            })
+        })
+    }));
+});
+
+export { Slider as S };

package/dist/esm/chunks/Spacer-BlgEdKEM.mjs

@@ -0,0 +1,20 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import React, { useMemo } from "react";
+
+const Spacer = React.memo(props => {
+    const {size: size = 8} = props, divAttributes = __rest(props, [ "size" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), spacerStyle = useMemo(() => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
+    }), [ size ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "";
+    return jsx("div", Object.assign({
+        id: divId,
+        className: divClass.trim(),
+        style: Object.assign(Object.assign({}, divStyle), spacerStyle)
+    }, rest));
+});
+
+export { Spacer as S };

package/dist/esm/chunks/Switch-obpmvCGd.mjs

@@ -0,0 +1,45 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css_wrapper = "Switch-module_wrapper__OqM0E flexBox-module_row__PWxbe", css_knob = "Switch-module_knob__BLGda flexBox-module_row__PWxbe";
+
+styleInject(".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");
+
+const Switch = React.memo(props => {
+    const {state: state = !1, height: height = 22, width: width = 44, padding: padding = 3, bgColorOn: bgColorOn = "var(--feedback-positive)", bgColorOff: bgColorOff = "var(--core-text-disabled)", knobColor: knobColor = "var(--core-surface-primary)", onChange: onChange = () => null} = props, divAttributes = __rest(props, [ "state", "height", "width", "padding", "bgColorOn", "bgColorOff", "knobColor", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [on, setOn] = useState(state);
+    useEffect(() => {
+        setOn(state);
+    }, [ state ]);
+    const handleClick = useCallback(() => {
+        setOn(!on), onChange(!on);
+    }, [ on, onChange ]), justify = useMemo(() => ({
+        justifyContent: on ? "flex-end" : "flex-start"
+    }), [ on ]), cssVars = useMemo(() => ({
+        "--switch-width": `${width}px`,
+        "--switch-height": `${height}px`,
+        "--switch-padding": `${padding}px`,
+        "--switch-knob-size": height - 2 * padding + "px",
+        "--switch-knob-color": knobColor,
+        "--switch-bg-color": on ? bgColorOn : bgColorOff
+    }), [ width, height, padding, bgColorOff, bgColorOn, on, knobColor ]);
+    return jsx(motion.div, Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign(Object.assign({}, divStyle), justify), cssVars),
+        onClick: handleClick
+    }, rest, {
+        children: jsx(motion.div, {
+            className: css_knob,
+            layout: "preserve-aspect"
+        })
+    }));
+});
+
+export { Switch as S };

package/dist/esm/chunks/TabBar-DFj021UP.mjs

@@ -0,0 +1,141 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { B as Badge } from "./Badge-BISGWj5-.mjs";
+
+import { I as Icon } from "./_types-KZDzhaiK.mjs";
+
+import { I as IconButton } from "./IconButton-BBiZrXlS.mjs";
+
+import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css_wrapper = "TabBar-module_wrapper__z8Cvg flexBox-module_rowStart__nJZnW", css_option = "TabBar-module_option__Og-E4 flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G", css_icon = "TabBar-module_icon__LU5Rp flexBox-module_row__PWxbe", css_close = "TabBar-module_close__ytzs5 flexBox-module_row__PWxbe";
+
+styleInject(".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_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\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: 500;\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: 600;\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: 500;\n\tfont-size: 30px;\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: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\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");
+
+const placeholderOptions = [ {
+    name: "Option 1",
+    value: "Option 1",
+    icon: null
+}, {
+    name: "Option 2",
+    value: "Option 2",
+    icon: "wallet"
+} ], 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 = "distribute", padding: padding = 8, 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 = __rest(props, [ "options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "onChange", "onTabChange", "onClose", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selected);
+    useEffect(() => {
+        let selectedIndex = 0;
+        selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
+        setIndex(-1 === selectedIndex ? selected : selectedIndex)) : setIndex(selected);
+    }, [ selected, selectedValue, options ]);
+    const handleClick = useCallback(i => {
+        setIndex(i), onChange(i), onTabChange(options[i]);
+    }, [ onChange, onTabChange, options ]), handleOptionClick = useCallback(i => {
+        onToolTip(null), handleClick(i);
+    }, [ onToolTip, handleClick ]), renderedOptions = useMemo(() => options.map((option, i) => 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 ]), setStyle = useCallback(value => "string" == typeof value ? value : `${value}px`, []), cssVars = useMemo(() => ({
+        "--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 jsxs("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: [ renderedOptions, hasClose && jsx("div", {
+            className: css_close,
+            children: jsx(IconButton, {
+                iconSize: iconSize - 4,
+                frameSize: iconSize,
+                toggle: !1,
+                hover: !0,
+                icon: "x",
+                onClick: onClose
+            })
+        }) ]
+    }));
+});
+
+TabBar.displayName = "TabBar";
+
+const Option = React.memo(props => {
+    const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "distribute", count: count = 0} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
+        if (onToolTip(null), showToolTip && ref.current) {
+            const tip = {
+                type: ToolTipType.button,
+                payload: {
+                    label: showToolTip
+                },
+                event: e,
+                ref: ref
+            };
+            onToolTip(tip);
+        }
+    }, [ showToolTip, onToolTip ]), handleMouseLeave = useCallback(() => {
+        showToolTip && onToolTip(null);
+    }, [ showToolTip, onToolTip ]), textColor = useMemo(() => disabled ? "var(--core-text-disabled)" : selected ? "var(--core-text-special)" : "var(--core-text-primary)", [ disabled, selected ]), setTabWidth = useMemo(() => "min-content" === tabWidth ? "min-content" : "distribute" === tabWidth ? "unset" : `${tabWidth}px`, [ tabWidth ]), setTabFlex = useMemo(() => "distribute" === tabWidth ? "1" : "unset", [ tabWidth ]), setUnderline = useMemo(() => selected && underline && !disabled ? "1px" : "0", [ underline, disabled, selected ]), cssVars = useMemo(() => ({
+        "--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": `${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 ]);
+    return jsxs("div", {
+        className: css_option,
+        style: cssVars,
+        ref: ref,
+        "aria-selected": selected,
+        onMouseEnter: handleMouseOver,
+        onMouseLeave: handleMouseLeave,
+        onClick: () => onClick(value),
+        onKeyDown: () => onClick(value),
+        children: [ icon && jsx("div", {
+            className: css_icon,
+            children: jsx(Icon, {
+                name: icon,
+                size: iconSize,
+                strokeColor: strokeColor
+            })
+        }), label, 0 !== count && jsx(Badge, {
+            variant: "light",
+            hideNull: !1,
+            count: count
+        }) ]
+    });
+}, (prevProps, nextProps) => prevProps.selected === nextProps.selected && prevProps.underline === nextProps.underline && prevProps.tabWidth === nextProps.tabWidth && prevProps.disabled === nextProps.disabled && prevProps.iconGap === nextProps.iconGap && prevProps.iconSize === nextProps.iconSize && prevProps.count === nextProps.count && prevProps.label === nextProps.label && prevProps.icon === nextProps.icon);
+
+Option.displayName = "TabOption";
+
+export { TabBar as T };

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

@@ -0,0 +1,90 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
+
+import { B as Button } from "./Button-B_aIY6wE.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css_wrapper = "TextArea-module_wrapper__vgfIH flexBox-module_columnStart__Kg8cV", css_textarea = "TextArea-module_textarea__eAcFn", css_send = "TextArea-module_send__SUUqB", css_s = "TextArea-module_s__53cFy type-module_body-s-regular__8-FO-", css_m = "TextArea-module_m__TtgeD type-module_body-m-regular__Qtp5G", css_l = "TextArea-module_l__u69gT type-module_body-l-regular__Ar4d3";
+
+styleInject(".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_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\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: 500;\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: 600;\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: 500;\n\tfont-size: 30px;\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: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\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");
+
+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 = !1, borderRadius: borderRadius = 4, padding: padding = "16px 4px 16px 16px", validate: validate = !1, resizable: resizable = !0, hasSend: hasSend = !1, sendOffset: sendOffset = {
+        bottom: 6,
+        right: 6
+    }, sendSize: sendSize = 36, returnSubmits: returnSubmits = !1, bgColor: bgColor, minWidth: minWidth, textSize: textSize = "m", disabled: disabled = !1, submitClears: submitClears = !0, onChange: onChange = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onValidate: onValidate = () => null, onSubmit: onSubmit = () => null, onKeyDown: onKeyDown = () => null} = props, divAttributes = __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" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [isFocused, setIsFocused] = useState(focused), [invalid, setInvalid] = useState(!1), [text, setText] = useState(value), [initiated, setInitiated] = useState(!1), ref = useRef(null), handleResize = useCallback(() => {
+        (null == ref ? void 0 : ref.current) && (ref.current.style.height = "auto", ref.current.style.height = `${ref.current.scrollHeight}px`);
+    }, []), runValidation = useCallback(content => {
+        let valid = !0;
+        return validate && content.length < 1 && (valid = !1), initiated || (valid = !0), 
+        onValidate(valid), !valid;
+    }, [ initiated, onValidate, validate ]);
+    useEffect(() => {
+        (null == ref ? void 0 : ref.current) && (focused ? ref.current.focus() : ref.current.blur(), 
+        setIsFocused(focused));
+    }, [ focused ]), useEffect(() => {
+        value && (setText(value), setInvalid(runValidation(value)));
+    }, [ value, runValidation ]), useEffect(() => {
+        handleResize();
+    }, [ rows ]);
+    const handleChange = useCallback(content => {
+        onChange(content), setText(content), setInvalid(runValidation(content));
+    }, [ onChange, runValidation ]), handleFocus = useCallback(() => {
+        (null == ref ? void 0 : ref.current) && ref.current.focus(), setInitiated(!0), setIsFocused(!0), 
+        onFocus();
+    }, [ onFocus ]), handleBlur = useCallback(content => {
+        handleChange(content), setIsFocused(!1), onBlur();
+    }, [ handleChange, onBlur ]), handleSubmit = useCallback(e => {
+        null == e || e.preventDefault(), handleFocus(), onSubmit(text), submitClears && setText(""), 
+        (null == ref ? void 0 : ref.current) && (ref.current.value = ""), handleResize();
+    }, [ handleFocus, onSubmit, text, submitClears, handleResize ]), handleKeyDownWrapper = useCallback(e => {
+        returnSubmits && "Enter" === e.key && (e.preventDefault(), e.stopPropagation(), 
+        handleSubmit(void 0)), onKeyDown(e);
+    }, [ returnSubmits, handleSubmit, onKeyDown ]), setStyleValue = useCallback(value => "string" == typeof value ? value : `${value}px`, []), setBorderColor = useMemo(() => isFocused ? "var(--core-link-primary)" : validate && invalid ? "var(--feedback-warning)" : border ? "var(--core-outline-primary)" : "transparent", [ isFocused, invalid, validate, border ]), textClassName = useMemo(() => "l" === textSize ? css_l : "m" === textSize ? css_m : css_s, [ textSize ]), cssVars = useMemo(() => ({
+        "--ta-border-radius": `${borderRadius}px`,
+        "--ta-width": `${setStyleValue(width)}`,
+        "--ta-min-width": minWidth ? `${minWidth}px` : "unset",
+        "--ta-bg-color": null != bgColor ? 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 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 && jsx("div", {
+            className: css_send,
+            onMouseDown: e => handleSubmit(e),
+            children: jsx(Button, {
+                iconLeft: "arrow up",
+                size: "medium",
+                variant: "solid",
+                round: !0
+            })
+        }), 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)
+        }) ]
+    }));
+});
+
+export { TextArea as T };