@apple-pie/slice 0.1.6 → 0.1.8

package/dist/esm/chunks/{Slider-ZuSvETfo.mjs → Slider-DL2iuNlh.mjs}

@@ -2,64 +2,59 @@ import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
-import React, { useRef, useMemo, useCallback, useEffect } from "react";
+import React, { useRef, useState, useMemo, useCallback, useEffect } from "react";
 
 import { useObserveResize } from "../hooks/useObserveResize.mjs";
 
-import { p as pointerPosition } from "./misc-cg9I7drO.mjs";
+import { p as pointerPosition } from "./misc-N8KLjOXc.mjs";
+
+import { d as debounce } from "./debounce-Bst1jxMS.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__KCCs1", css_trackBg = "Slider-module_trackBg__7zfqm flexBox-module_rowStart__4tcxS", css_track = "Slider-module_track__kaJkL flexBox-module_rowStart__4tcxS", css_trackHead = "Slider-module_trackHead__W-UdG", css_trackWrapper = "Slider-module_trackWrapper__Ot0Wh flexBox-module_rowStart__4tcxS";
+var css_wrapper = "Slider-module_wrapper__KCCs1", css_trackBg = "Slider-module_trackBg__7zfqm flexBox-module_rowStart__4tcxS", css_track = "Slider-module_track__kaJkL flexBox-module_rowStart__4tcxS", css_trackHead = "Slider-module_trackHead__W-UdG", css_trackWrapper = "Slider-module_trackWrapper__Ot0Wh flexBox-module_rowStart__4tcxS";
 
-styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__KCCs1 {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0 var(--slider-padding);\n\tmargin: 0;\n\twidth: var(--slider-width);\n\theight: auto;\n\tmin-height: var(--slider-touch-height);\n\tcursor: var(--slider-cursor);\n\tbackground: transparent;\n}\n\n.Slider-module_trackBg__7zfqm {\n\tposition: relative;\n\twidth: 100%;\n\theight: var(--slider-height);\n\tbackground-color: var(--slider-track-color);\n\toverflow: visible;\n\tborder-radius: 100px;\n}\n\n.Slider-module_track__kaJkL {\n\tposition: relative;\n\twidth: 0;\n\theight: var(--slider-height);\n\tbackground-color: var(--slider-progress-color);\n\toverflow: visible;\n\tborder-radius: 100px;\n}\n\n.Slider-module_trackHead__W-UdG {\n\tposition: absolute;\n\tdisplay: var(--slider-head-display);\n\tbackground-color: var(--slider-head-color);\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_trackWrapper__Ot0Wh {\n\tposition: relative;\n\twidth: 100%;\n\theight: var(--slider-height);\n\tmin-height: var(--slider-touch-height);\n\tbackground-color: transparent;\n\tborder-radius: 100px;\n\toverflow: visible;\n}\n");
+styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__KCCs1 {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0 var(--slider-padding);\n\tmargin: 0;\n\twidth: var(--slider-width);\n\theight: auto;\n\tmin-height: var(--slider-touch-height);\n\tcursor: var(--slider-cursor);\n\tbackground: transparent;\n}\n\n.Slider-module_trackBg__7zfqm {\n\tposition: relative;\n\twidth: 100%;\n\theight: var(--slider-height);\n\tbackground-color: var(--slider-track-color);\n\toverflow: hidden;\n\tborder-radius: 100px;\n}\n\n.Slider-module_track__kaJkL {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\twidth: 0;\n\tbackground-color: var(--slider-progress-color);\n\toverflow: visible;\n\tborder-radius: 100px;\n}\n\n.Slider-module_trackHead__W-UdG {\n\tposition: absolute;\n\tdisplay: var(--slider-head-display);\n\tbackground-color: var(--slider-head-color);\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_trackWrapper__Ot0Wh {\n\tposition: relative;\n\twidth: 100%;\n\theight: var(--slider-height);\n\tmin-height: var(--slider-touch-height);\n\tbackground-color: transparent;\n\tborder-radius: 100px;\n\toverflow: visible;\n\toutline: none;\n}\n\n.Slider-module_trackWrapper__Ot0Wh:focus-visible {\n\toutline: 2px solid var(--core-link-primary);\n\toutline-offset: 2px;\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, 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", "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, {
+    const {value: value = 25, scaleMin: scaleMin = 0, scaleMax: scaleMax = 100, width: width, height: height = 2, touchHeight: touchHeight = 24, trackHeadSize: trackHeadSize = 7, 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", "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), [currentValue, setCurrentValue] = useState(value), absProgressRef = useRef(value), relativeProgressRef = useRef(0), 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) => {
+    }), debouncedOnChange = debounce((value, percent) => {
         onChange(value, percent);
-    }, 0), padding = useMemo(() => trackHeadSize ? Math.ceil(trackHeadSize / 2) : 0, [ trackHeadSize ]), setTrackAndHead = useCallback(pixelPos => {
+    }, 0), padding = useMemo(() => trackHeadSize ? Math.ceil(trackHeadSize / 2) : 0, [ trackHeadSize ]), clampValue = useCallback(nextValue => Math.min(scaleMax, Math.max(scaleMin, nextValue)), [ scaleMax, scaleMin ]), valueToPercent = useCallback(nextValue => {
+        const range = scaleMax - scaleMin;
+        return range <= 0 ? 0 : (nextValue - scaleMin) / range;
+    }, [ scaleMax, scaleMin ]), setTrackAndHead = useCallback(pixelPos => {
         const hd = head.current, tr = track.current;
         hd && (hd.style.left = `${pixelPos}px`), tr && (tr.style.width = `${pixelPos}px`), 
         didMount.current = !0;
     }, []), 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;
+        const sliderWidth = ref.current.getBoundingClientRect().width, adjustedCurrent = clampValue(current);
+        adjustedCurrent !== current && console.warn("Slider outside range. Adjusted to nearest bound.");
+        const normalized = valueToPercent(adjustedCurrent), pixelPos = normalized * sliderWidth;
         absProgressRef.current = adjustedCurrent, relativeProgressRef.current = normalized, 
-        setTrackAndHead(pixelPos), didMount.current = !0;
-    }, [ scaleMax, scaleMin, setTrackAndHead ]), progress = useCallback(posX => {
+        setCurrentValue(adjustedCurrent), setTrackAndHead(pixelPos), didMount.current = !0;
+    }, [ clampValue, valueToPercent, 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 => {
+        relativeProgressRef.current = sliderWidth > 0 ? posX / sliderWidth : 0, absProgressRef.current = scaleMin + relativeProgressRef.current * (scaleMax - scaleMin), 
+        setCurrentValue(absProgressRef.current);
+    }, [ scaleMax, scaleMin ]), commitValue = useCallback((nextValue, notify = "change") => {
+        const el = ref.current;
+        if (!el) return;
+        const sliderWidth = el.getBoundingClientRect().width, clampedValue = clampValue(nextValue), percent = valueToPercent(clampedValue);
+        absProgressRef.current = clampedValue, relativeProgressRef.current = percent, setCurrentValue(clampedValue), 
+        setTrackAndHead(percent * sliderWidth), "change" !== notify && "both" !== notify || onChange(clampedValue, percent), 
+        "drag" !== notify && "both" !== notify || onDragChange(clampedValue, percent);
+    }, [ clampValue, valueToPercent, setTrackAndHead, onChange, onDragChange ]), updateSlider = useCallback(e => {
         const newPos = pointerPosition(e), el = null == ref ? void 0 : ref.current;
         if (!el) return 0;
-        const rect = el.getBoundingClientRect(), sliderWidth = Math.floor(rect.width);
+        const rect = el.getBoundingClientRect(), sliderWidth = rect.width;
         let pos = newPos - rect.x;
         return pos > sliderWidth ? pos = sliderWidth : pos < 0 && (pos = 0), setTrackAndHead(pos), 
         pos;
@@ -78,7 +73,39 @@ const Slider = React.memo(props => {
         }
         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 => {
+    }, [ handleMouseMove, progress, updateSlider, debouncedOnChange, onDragChange, onChange ]), handleKeyDown = useCallback(event => {
+        const range = scaleMax - scaleMin;
+        if (range <= 0) return;
+        const step = Number.isInteger(scaleMin) && Number.isInteger(scaleMax) ? 1 : Math.max(range / 100, .01), pageStep = Math.max(step, range / 10);
+        let nextValue = null;
+        switch (event.key) {
+          case "ArrowRight":
+          case "ArrowUp":
+            nextValue = absProgressRef.current + step;
+            break;
+
+          case "ArrowLeft":
+          case "ArrowDown":
+            nextValue = absProgressRef.current - step;
+            break;
+
+          case "PageUp":
+            nextValue = absProgressRef.current + pageStep;
+            break;
+
+          case "PageDown":
+            nextValue = absProgressRef.current - pageStep;
+            break;
+
+          case "Home":
+            nextValue = scaleMin;
+            break;
+
+          case "End":
+            nextValue = scaleMax;
+        }
+        null !== nextValue && (event.preventDefault(), debouncedOnChange.cancel(), commitValue(nextValue, "change"));
+    }, [ scaleMin, scaleMax, debouncedOnChange, commitValue ]), 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);
@@ -125,6 +152,14 @@ const Slider = React.memo(props => {
         children: jsxs("div", {
             ref: ref,
             className: css_trackWrapper,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Slider",
+            "aria-valuemin": scaleMin,
+            "aria-valuemax": scaleMax,
+            "aria-valuenow": currentValue,
+            "aria-orientation": "horizontal",
+            onKeyDown: handleKeyDown,
             children: [ jsx("div", {
                 className: css_trackBg,
                 children: jsx("div", {

package/dist/esm/chunks/{Switch-nWg2Ykea.mjs → Switch-Cv6LABsW.mjs}

@@ -10,7 +10,7 @@ import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
 var css_wrapper = "Switch-module_wrapper__kudO9 flexBox-module_row__z24tF", css_knob = "Switch-module_knob__vKNOc flexBox-module_row__z24tF";
 
-styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__kudO9 {\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 var(--motion-water-duration) var(--motion-water) 0s;\n}\n\n.Switch-module_knob__vKNOc {\n\twidth: var(--switch-knob-size);\n\theight: var(--switch-knob-size);\n\tbackground: var(--switch-knob-color);\n\tborder-radius: 100%;\n}\n");
+styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__kudO9 {\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 var(--motion-water-duration) var(--motion-water) 0s;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tborder: 0;\n\toutline: none;\n}\n\n.Switch-module_knob__vKNOc {\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);
@@ -29,11 +29,14 @@ const Switch = React.memo(props => {
         "--switch-knob-color": knobColor,
         "--switch-bg-color": on ? bgColorOn : bgColorOff
     }), [ width, height, padding, bgColorOff, bgColorOn, on, knobColor ]);
-    return jsx(motion.div, Object.assign({
+    return jsx(motion.button, Object.assign({
         id: divId,
+        type: "button",
         className: `${css_wrapper}${divClass}`,
         style: Object.assign(Object.assign(Object.assign({}, divStyle), justify), cssVars),
-        onClick: handleClick
+        onClick: handleClick,
+        role: "switch",
+        "aria-checked": on
     }, rest, {
         children: jsx(motion.div, {
             className: css_knob,

package/dist/esm/chunks/{TabBar-BYtGaj_A.mjs → TabBar-qiozE5zA.mjs}

@@ -2,7 +2,7 @@ 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 React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 
 import { useTheme } from "../hooks/useTheme.mjs";
 
@@ -12,9 +12,9 @@ import "../hooks/useWindow.mjs";
 
 import { B as Badge } from "./Badge-DyICxZP2.mjs";
 
-import { I as Icon } from "./_types-C8GP_aSD.mjs";
+import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
-import { I as IconButton } from "./IconButton-B5WEf-v5.mjs";
+import { I as IconButton } from "./IconButton-4O5S9S9G.mjs";
 
 import { T as ToolTipType } from "./sharedTypes-tn9-uJvb.mjs";
 
@@ -22,7 +22,7 @@ import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
 var css_wrapper = "TabBar-module_wrapper__cyOR1 flexBox-module_rowStart__4tcxS", css_option = "TabBar-module_option__gYjDf flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_icon = "TabBar-module_icon__JDgG3 flexBox-module_row__z24tF", css_close = "TabBar-module_close__bvSBh flexBox-module_row__z24tF";
 
-styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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__cyOR1 {\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__gYjDf {\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__JDgG3 {\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__bvSBh {\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");
+styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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__cyOR1 {\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__gYjDf {\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\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\tbackground-color: transparent;\n\tborder: 0;\n\toutline: none;\n\ttext-align: left;\n}\n\n.TabBar-module_icon__JDgG3 {\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__bvSBh {\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",
@@ -33,7 +33,7 @@ const placeholderOptions = [ {
     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);
+    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), optionRefs = useRef([]);
     useEffect(() => {
         let selectedIndex = 0;
         selectedValue && options ? (selectedIndex = options.findIndex(option => option.value === selectedValue), 
@@ -43,7 +43,32 @@ const placeholderOptions = [ {
         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, {
+    }, [ onToolTip, handleClick ]), focusOption = useCallback(nextIndex => {
+        var _a;
+        null === (_a = optionRefs.current[nextIndex]) || void 0 === _a || _a.focus();
+    }, []), handleOptionKeyDown = useCallback((event, optionIndex) => {
+        if (options.length < 1) return;
+        let nextIndex = null;
+        switch (event.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+            nextIndex = (optionIndex + 1) % options.length;
+            break;
+
+          case "ArrowLeft":
+          case "ArrowUp":
+            nextIndex = (optionIndex - 1 + options.length) % options.length;
+            break;
+
+          case "Home":
+            nextIndex = 0;
+            break;
+
+          case "End":
+            nextIndex = options.length - 1;
+        }
+        null !== nextIndex && (event.preventDefault(), handleOptionClick(nextIndex), focusOption(nextIndex));
+    }, [ options.length, handleOptionClick, focusOption ]), renderedOptions = useMemo(() => options.map((option, i) => jsx(Option, {
         label: option.name,
         value: i,
         showToolTip: option.toolTip,
@@ -55,10 +80,14 @@ const placeholderOptions = [ {
         disabled: disabled,
         count: option.count,
         onClick: handleOptionClick,
+        onKeyDown: handleOptionKeyDown,
         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(() => ({
+        tabWidth: tabWidth,
+        buttonRef: element => {
+            optionRefs.current[i] = element;
+        }
+    }, `${i}_option_${option.name}`)), [ options, index, padding, iconSize, iconGap, disabled, underline, tabWidth, onToolTip, handleOptionClick, handleOptionKeyDown ]), 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),
@@ -69,7 +98,9 @@ const placeholderOptions = [ {
     return jsxs("div", Object.assign({
         id: divId,
         className: `${css_wrapper}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars)
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        role: "tablist",
+        "aria-orientation": "horizontal"
     }, rest, {
         children: [ renderedOptions, hasClose && jsx("div", {
             className: css_close,
@@ -88,7 +119,7 @@ const placeholderOptions = [ {
 TabBar.displayName = "TabBar";
 
 const Option = React.memo(props => {
-    const theme = useTheme(), {label: label = "Option", value: value = 0, icon: icon = null, selected: selected = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null, padding: padding = 8, iconSize: iconSize = 20, iconGap: iconGap = 6, disabled: disabled = !1, showToolTip: showToolTip = null, underline: underline = !0, tabWidth: tabWidth = "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 => {
+    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, onKeyDown: onKeyDown = () => null, buttonRef: buttonRef} = props, ref = useRef(null), strokeColor = useMemo(() => !disabled && selected ? theme.current.colors["core-text-special"] : disabled ? theme.current.colors["core-text-disabled"] : theme.current.colors["core-text-primary"], [ disabled, selected, theme ]), handleMouseOver = useCallback(e => {
         if (onToolTip(null), showToolTip && ref.current) {
             const tip = {
                 type: ToolTipType.button,
@@ -112,15 +143,20 @@ const Option = React.memo(props => {
         "--tab-bar-option-width": setTabWidth,
         "--tab-bar-option-flex": setTabFlex
     }), [ padding, iconSize, disabled, textColor, iconGap, setTabFlex, setTabWidth, setUnderline ]);
-    return jsxs("div", {
+    return jsxs("button", {
+        type: "button",
         className: css_option,
         style: cssVars,
-        ref: ref,
+        ref: element => {
+            ref.current = element, null == buttonRef || buttonRef(element);
+        },
+        role: "tab",
         "aria-selected": selected,
+        tabIndex: selected ? 0 : -1,
         onMouseEnter: handleMouseOver,
         onMouseLeave: handleMouseLeave,
         onClick: () => onClick(value),
-        onKeyDown: () => onClick(value),
+        onKeyDown: e => onKeyDown(e, value),
         children: [ icon && jsx("div", {
             className: css_icon,
             children: jsx(Icon, {

package/dist/esm/chunks/{TextArea-D88dZrXm.mjs → TextArea-yF2pGeel.mjs}

@@ -4,7 +4,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { B as Button } from "./Button-DexmN81C.mjs";
+import { B as Button } from "./Button-DAvVj4YV.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{TextField-DvTB_JoS.mjs → TextField-CgnPj6oK.mjs}

@@ -12,11 +12,11 @@ import "../theme/colors.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-DexmN81C.mjs";
+import { B as Button } from "./Button-DAvVj4YV.mjs";
 
-import { I as Icon } from "./_types-C8GP_aSD.mjs";
+import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
-import { I as IconButton } from "./IconButton-B5WEf-v5.mjs";
+import { I as IconButton } from "./IconButton-4O5S9S9G.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
@@ -26,12 +26,13 @@ var css = {
     label: "TextField-module_label__jD8MR flexBox-module_rowStart__4tcxS",
     input: "TextField-module_input__AkWBQ",
     showPassword: "TextField-module_showPassword__4Ecfo flexBox-module_row__z24tF",
+    clearButton: "TextField-module_clearButton__O9ed3 flexBox-module_row__z24tF",
     s: "TextField-module_s__0qm83 type-module_body-s-regular__vRHSP",
     m: "TextField-module_m__M-tLl type-module_body-m-regular__LuQBA",
     l: "TextField-module_l__gbNRz type-module_body-l-regular__lOYbg"
 };
 
-styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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.TextField-module_wrapper__qZ-p- {\n\tposition: relative;\n\tpadding: var(--tf-padding) !important;\n\tgap: 8px;\n\toverflow: visible;\n\twidth: var(--tf-width);\n\theight: var(--tf-height);\n\tborder-radius: var(--tf-border-radius);\n\tbackground: var(--tf-bg);\n\tbox-shadow: var(--tf-box-shadow);\n\ttransition: all var(--motion-water-duration) var(--motion-water) 0s;\n}\n\n.TextField-module_container__5U9yK {\n\tflex: 1;\n\theight: 100%;\n\tgap: 8px;\n}\n\n.TextField-module_label__jD8MR {\n\tcolor: var(--tf-label-color);\n\theight: auto;\n\toverflow: hidden;\n\twhite-space: nowrap;\n}\n\n.TextField-module_input__AkWBQ {\n\tcolor: var(--tf-text-color);\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\toutline: none;\n\tborder: 0;\n\theight: 100%;\n\twidth: 100%;\n\ttext-align: var(--tf-text-align);\n\t&::placeholder {\n\t\tcolor: var(--tf-placeholder-color);\n\t}\n\t&:focus::placeholder {\n\t\tcolor: var(--tf-placeholder-color);\n\t}\n\t&:disabled {\n\t\tcolor: var(--core-text-disabled);\n\t}\n\t&:-webkit-autofill,\n\t&:-webkit-autofill:hover,\n\t&:-webkit-autofill:focus,\n\t&:-webkit-autofill:active {\n\t\tbox-shadow: 0 0 0 50px var(--core-button-disabled) inset !important;\n\t\t-webkit-text-fill-color: var(--core-text-primary);\n\t}\n}\n\n.TextField-module_showPassword__4Ecfo {\n\tmin-height: 18px;\n\tmin-width: 18px;\n\tmax-height: 18px;\n\tmax-width: 18px;\n\topacity: var(--tf-show-opacity);\n\t&:hover {\n\t\topacity: var(--tf-show-opacity-hover);\n\t}\n}\n\n.TextField-module_s__0qm83 {\n}\n\n.TextField-module_m__M-tLl {\n}\n\n.TextField-module_l__gbNRz {\n}\n");
+styleInject(".flexBox-module_row__z24tF {\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__5FEvi {\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__4tcxS {\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__rVdVm {\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__ezvMq {\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__C7P44 {\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__PKcrG {\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__ERfp7 {\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__lLJuc {\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__ZAFft {\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__s3KvF {\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__Lhqqq {\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__vRHSP {\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__tjdFc {\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__Iy-VX {\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__LuQBA {\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__uW1on {\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__UBcvQ {\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__lOYbg {\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__BqRC7 {\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__Fh2dt {\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__pF2kC {\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__BeyrH {\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__Ruknj {\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__z8L3G {\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__0O3g6 {\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__KXxEB {\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__cJeEA {\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__eRe05 {\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__Xmwtf {\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__5q1m3 {\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__k9VFV {\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.TextField-module_wrapper__qZ-p- {\n\tposition: relative;\n\tpadding: var(--tf-padding) !important;\n\tgap: 8px;\n\toverflow: visible;\n\twidth: var(--tf-width);\n\theight: var(--tf-height);\n\tborder-radius: var(--tf-border-radius);\n\tbackground: var(--tf-bg);\n\tbox-shadow: var(--tf-box-shadow);\n\ttransition: all var(--motion-water-duration) var(--motion-water) 0s;\n}\n\n.TextField-module_container__5U9yK {\n\tflex: 1;\n\theight: 100%;\n\tgap: 8px;\n}\n\n.TextField-module_label__jD8MR {\n\tcolor: var(--tf-label-color);\n\theight: auto;\n\toverflow: hidden;\n\twhite-space: nowrap;\n}\n\n.TextField-module_input__AkWBQ {\n\tcolor: var(--tf-text-color);\n\tbackground-color: transparent;\n\tbox-sizing: border-box;\n\toutline: none;\n\tborder: 0;\n\theight: 100%;\n\twidth: var(--tf-input-width);\n\tfield-sizing: var(--tf-field-size);\n\ttext-align: var(--tf-text-align);\n\t&::placeholder {\n\t\tcolor: var(--tf-placeholder-color);\n\t}\n\t&:focus::placeholder {\n\t\tcolor: var(--tf-placeholder-color);\n\t}\n\t&:disabled {\n\t\tcolor: var(--core-text-disabled);\n\t}\n\t&:-webkit-autofill,\n\t&:-webkit-autofill:hover,\n\t&:-webkit-autofill:focus,\n\t&:-webkit-autofill:active {\n\t\tbox-shadow: 0 0 0 50px var(--core-button-disabled) inset !important;\n\t\t-webkit-text-fill-color: var(--core-text-primary);\n\t}\n}\n\n.TextField-module_showPassword__4Ecfo {\n\tmin-height: 18px;\n\tmin-width: 18px;\n\tmax-height: 18px;\n\tmax-width: 18px;\n\topacity: var(--tf-show-opacity);\n\t&:hover {\n\t\topacity: var(--tf-show-opacity-hover);\n\t}\n}\n\n.TextField-module_clearButton__O9ed3 {\n\tposition: absolute;\n\tright: 8px;\n\ttop: 50%;\n\tborder: 0;\n\ttransform: translateY(-50%);\n\tbackground: transparent;\n\tappearance: none;\n\t-webkit-appearance: none;\n\toutline: none;\n\tcursor: pointer;\n\tz-index: 1;\n}\n\n.TextField-module_s__0qm83 {\n}\n\n.TextField-module_m__M-tLl {\n}\n\n.TextField-module_l__gbNRz {\n}\n");
 
 const MOTION_CONFIG = {
     variants: {
@@ -51,7 +52,7 @@ const MOTION_CONFIG = {
     }
 }, TextField = React.memo(props => {
     const theme = useTheme(), {name: name = "input_name", value: value = "", label: label = "", labelSize: labelSize = "m", textSize: textSize = "m", placeholder: placeholder = "placeholder", focused: focused = !1, onSubmit: onSubmit = () => null, onChange: onChange = () => null, onBlur: onBlur = () => null, onFocus: onFocus = () => null, onKeydown: onKeydown = () => null, onAction: onAction = () => null, onPaste: onPaste = () => null, onClear: onClear = () => null, onValidate: onValidate = () => null, actionButton: actionButton = !1, maxLength: maxLength, size: size = {
-        width: "100%",
+        width: "auto",
         height: "auto"
     }, padding: padding = "8px 16px", borderRadius: borderRadius = 8, editable: editable = !0, textAlign: textAlign = "left", isValid: isValid = !0, inline: inline = !1, noShow: noShow = !1, borderType: borderType = "box", validate: validate = !0, borderColor: borderColor = {
         focused: "var(--core-link-primary)",
@@ -117,6 +118,8 @@ const MOTION_CONFIG = {
     }, [ isFocused, valid, color, validate ]), setTextAlign = useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), cssVars = useMemo(() => {
         var _a;
         return {
+            "--tf-input-width": "unset" !== size.width && "100%",
+            "--tf-field-size": "auto" === size.width ? "content" : "unset",
             "--tf-width": setStyleValue(size.width),
             "--tf-height": setStyleValue(size.height),
             "--tf-padding": setStyleValue(padding),
@@ -169,7 +172,9 @@ const MOTION_CONFIG = {
                 maxLength: maxLength
             }), jsx(AnimatePresence, {
                 initial: !1,
-                children: isFocused && clearButton && "" !== text && jsx(motion.div, {
+                children: isFocused && clearButton && "" !== text && jsx(motion.button, {
+                    type: "button",
+                    "aria-label": "Clear text",
                     className: css.clearButton,
                     style: clearButtonStyle,
                     variants: MOTION_CONFIG.variants,

package/dist/esm/chunks/{Tip-B-cDOFvV.mjs → Tip-CroDIKO4.mjs}

@@ -6,7 +6,7 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-cg9I7drO.mjs";
+import { f as filterClasses } from "./misc-N8KLjOXc.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{Toast-BdlopzJ6.mjs → Toast-CM493gMR.mjs}

@@ -12,9 +12,9 @@ import "../theme/colors.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-cg9I7drO.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-N8KLjOXc.mjs";
 
-import { I as Icon } from "./_types-C8GP_aSD.mjs";
+import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 

package/dist/esm/chunks/{UploadArea--i-bbRIJ.mjs → UploadArea-BNf1y8Ep.mjs}

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 
-import React, { useState, useRef, useCallback, useMemo } from "react";
+import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-cg9I7drO.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc-N8KLjOXc.mjs";
 
-import { F as FileList } from "./FileList-E5uvcN2J.mjs";
+import { F as FileList } from "./FileList-BHCGzX_0.mjs";
 
-import { I as Icon } from "./_types-C8GP_aSD.mjs";
+import { I as Icon } from "./Icon-C92f63Ib.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-DeLwB3Rb.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BVwQNOcV.mjs";
 
 import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
 
@@ -36,11 +36,11 @@ var FileTypes;
 }(FileTypes || (FileTypes = {}));
 
 const UploadAreaBase = React.forwardRef((props, ref) => {
-    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", radius: radius = 8, padding: padding = 32, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), handleClickUpload = useCallback(() => {
+    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", radius: radius = 8, padding: padding = 32, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), inputId = useId(), titleId = useId(), messageId = useId(), isInteractive = !busy && files.length < 1, handleClickUpload = useCallback(() => {
         var _a;
-        busy || files.length > 0 || (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
+        isInteractive && (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
         null === (_a = inputRef.current) || void 0 === _a || _a.click());
-    }, [ busy, files.length ]), handleFileInputChange = useCallback(e => {
+    }, [ isInteractive ]), handleFileInputChange = useCallback(e => {
         busy || e.target.files && (null == onUpload || onUpload(Array.from(e.target.files)));
     }, [ busy, onUpload ]), hasFilesInDrag = useCallback(e => {
         var _a, _b;
@@ -72,11 +72,13 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
         className: css.wrapper,
         style: cssVars,
         ref: ref,
-        role: "button",
-        "aria-label": "Click to upload files",
-        tabIndex: 0,
-        onClick: handleClickUpload,
-        onKeyDown: e => accessibleKeyDown(e, () => handleClickUpload()),
+        role: isInteractive ? "button" : void 0,
+        "aria-label": isInteractive ? "Click to upload files" : void 0,
+        "aria-describedby": `${titleId} ${messageId}`,
+        "aria-disabled": !isInteractive,
+        tabIndex: isInteractive ? 0 : -1,
+        onClick: isInteractive ? handleClickUpload : void 0,
+        onKeyDown: isInteractive ? e => accessibleKeyDown(e, () => handleClickUpload()) : void 0,
         onDragEnter: handleDragEnter,
         onDragOver: e => {
             e.preventDefault();
@@ -92,9 +94,11 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
                 pointer: !1
             })
         }), jsx("div", {
+            id: titleId,
             className: css.title,
             children: title
         }), jsxs("div", {
+            id: messageId,
             className: `${css.message} ${css[textSize]}`,
             children: [ busy && showProgress && jsx(ProgressIndicator, {
                 show: !0,
@@ -115,6 +119,7 @@ const UploadAreaBase = React.forwardRef((props, ref) => {
                 canRemove: canRemove
             })
         }), jsx("input", {
+            id: inputId,
             ref: inputRef,
             type: "file",
             hidden: !0,