@apple-pie/slice 0.0.5 → 0.0.7

package/dist/esm/chunks/Slider-O6UelMjh.js

@@ -1,283 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-import { jsx } from 'react/jsx-runtime';
-import React, { useRef, useMemo, useCallback, useEffect } from 'react';
-import { useObserveResize } from '../hooks/useObserveResize.js';
-import { p as pointerPosition } from './utils-CZ1LWeN6.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-/**
- * General debounce utility with delay setting and cancel/flush methods
- * to clear a "debounce" or immediately "execute" the debounced function
- */
-function debounce(func, delay) {
-    let timeoutId = null;
-    let lastArgs = null;
-    const debounced = function (...args) {
-        lastArgs = args;
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            func.apply(this, lastArgs !== null && lastArgs !== void 0 ? lastArgs : []);
-            timeoutId = null;
-            lastArgs = null;
-        }, delay);
-    };
-    debounced.cancel = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            timeoutId = null;
-            lastArgs = null;
-        }
-    };
-    debounced.flush = function () {
-        if (timeoutId !== null && lastArgs !== null) {
-            clearTimeout(timeoutId);
-            func.apply(this, lastArgs);
-            timeoutId = null;
-            lastArgs = null;
-        }
-    };
-    return debounced;
-}
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.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";
-var css = {"wrapper":"Slider-module_wrapper__ju4N2","track":"Slider-module_track__XogMe flexBox-module_rowStart__nJZnW","trackHead":"Slider-module_trackHead__Ka3pu","trackBg":"Slider-module_trackBg__4z7Pt flexBox-module_rowStart__nJZnW"};
-styleInject(css_248z);
-
-const Slider = React.memo((props) => {
-    const { value = 25, scaleMin = 0, scaleMax = 100, width, height = 2, touchHeight = 24, trackHeadSize = 7, headType = 'round', trackHeadWidth = 4, cursor = 'default', headColor = 'var(--core-text-primary)', trackColor = 'var(--core-surface-secondary)', progressColor = 'var(--core-text-primary)', onChange = () => null, onDragChange = () => null } = props, divAttributes = __rest(props, ["value", "scaleMin", "scaleMax", "width", "height", "touchHeight", "trackHeadSize", "headType", "trackHeadWidth", "cursor", "headColor", "trackColor", "progressColor", "onChange", "onDragChange"]);
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    // hook into the relevant on screen elements
-    const ref = useRef(null);
-    const track = useRef(null);
-    const head = useRef(null);
-    // tracking slider values via ref to avoid state issues from direct listeners
-    const absProgressRef = useRef(value);
-    const relativeProgressRef = useRef(value / scaleMax);
-    const didMount = useRef(false);
-    // use resize observer to track changes to container size for responsive behavior
-    const size = useObserveResize(ref, { ignore: 'height' });
-    // use a "debounce" to limit the number of onChange calls
-    const debouncedOnChange = debounce((value, percent) => {
-        onChange(value, percent);
-    }, 0);
-    // set padding based on head size since dragging the head all the way to the edge will move it
-    // such that half the head would be outside the track constraints
-    const padding = useMemo(() => {
-        if (headType === 'none' || !trackHeadSize)
-            return 0;
-        return trackHeadSize / 2;
-    }, [headType, trackHeadSize]);
-    // set the position of the track progress and track head
-    // based on the pixel position / adjust for half the size of the head (= padding)
-    const setTrackAndHead = useCallback((pixelPos, max = false) => {
-        const tr = track.current;
-        const hd = head.current;
-        let adjustment = 0;
-        if (pixelPos === 0)
-            adjustment = padding;
-        if (max)
-            adjustment = -padding;
-        if (tr && hd) {
-            tr.style.width = `${pixelPos}px`;
-            hd.style.left = `${pixelPos - padding + adjustment}px`;
-        }
-        didMount.current = true;
-    }, [padding]);
-    // set the initial position of the slider absolute value within scale
-    const initialProgress = useCallback((current) => {
-        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
-            return;
-        const sliderWidth = ref.current.getBoundingClientRect().width;
-        let adjustedCurrent = current;
-        if (adjustedCurrent > scaleMax || adjustedCurrent < scaleMin) {
-            console.warn('Slider outside range. Adjusted to mid point.');
-            adjustedCurrent = (scaleMax - scaleMin) / 2;
-        }
-        const normalized = (adjustedCurrent - scaleMin) / (scaleMax - scaleMin);
-        const pixelPos = normalized * sliderWidth;
-        absProgressRef.current = adjustedCurrent; // updated the progress value
-        relativeProgressRef.current = normalized; // updated the relative value
-        const max = relativeProgressRef.current === 1; // flag if at max value
-        setTrackAndHead(pixelPos, max);
-        didMount.current = true;
-    }, [scaleMax, scaleMin, setTrackAndHead]);
-    // based on x pos of a mouse drag/click, update the percent and normalized value of the slider
-    const progress = useCallback((posX) => {
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (!el)
-            return { value: 0, percent: 0 };
-        const rect = el.getBoundingClientRect();
-        const sliderWidth = rect.width;
-        relativeProgressRef.current = posX / sliderWidth;
-        absProgressRef.current =
-            scaleMin + relativeProgressRef.current * (scaleMax - scaleMin);
-    }, [scaleMax, scaleMin]);
-    // take a mouse pos and sets the slider position accordingly
-    // returns the pos value making sure it's in bounds
-    const updateSlider = useCallback((e) => {
-        const newPos = pointerPosition(e);
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (!el)
-            return 0;
-        const rect = el.getBoundingClientRect();
-        const sliderWidth = rect.width;
-        let pos = newPos - rect.x;
-        if (pos > sliderWidth - padding)
-            pos = sliderWidth;
-        else if (pos < padding)
-            pos = 0;
-        const max = pos === sliderWidth;
-        setTrackAndHead(pos, max);
-        return pos;
-    }, [setTrackAndHead, padding]);
-    // on mouse move, push slider to the updated mouse position and trigger the update events
-    // use ref values in the call back to avoid state issues
-    const handleMouseMove = useCallback((e) => {
-        e.preventDefault();
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (el) {
-            const pos = updateSlider(e); // return new pixel pos and updates head/track
-            progress(pos); // update the slider progress
-            debouncedOnChange(absProgressRef.current, relativeProgressRef.current); // debounce updates
-        }
-    }, [progress, updateSlider, debouncedOnChange]);
-    // on mouse up, push slider to the updated mouse up position and trigger the update events
-    // also cleaning up the mouse move and mouse up listeners attached to the window
-    const handleMouseUp = useCallback((e) => {
-        e.preventDefault();
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (el) {
-            const pos = updateSlider(e); // return new pixel pos and updates head/track
-            progress(pos);
-            debouncedOnChange.cancel(); // cancel current debounce if any
-            onDragChange(absProgressRef.current, relativeProgressRef.current); // immediate update
-            onChange(absProgressRef.current, relativeProgressRef.current);
-        }
-        globalThis.removeEventListener('mousemove', handleMouseMove, false);
-        globalThis.removeEventListener('touchmove', handleMouseMove, false);
-        globalThis.removeEventListener('mouseup', handleMouseUp, false);
-        globalThis.removeEventListener('touchend', handleMouseUp, false);
-    }, [
-        handleMouseMove,
-        progress,
-        updateSlider,
-        debouncedOnChange,
-        onDragChange,
-        onChange,
-    ]);
-    // On mouse down push the progress of then slider to the mouse down point
-    // and trigger events - add the drag and mouse up window listeners
-    const handleMouseDown = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        globalThis.addEventListener('mousemove', handleMouseMove, false);
-        globalThis.addEventListener('touchmove', handleMouseMove, false);
-        globalThis.addEventListener('mouseup', handleMouseUp, false);
-        globalThis.addEventListener('touchend', handleMouseUp, false);
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (el) {
-            const pos = updateSlider(e); // return new pixel pos and updates head/track
-            progress(pos);
-            debouncedOnChange.cancel(); // cancel current debounce if any
-            onChange(absProgressRef.current, relativeProgressRef.current); // immediate update
-            onDragChange(absProgressRef.current, relativeProgressRef.current);
-        }
-    }, [
-        handleMouseMove,
-        handleMouseUp,
-        onChange,
-        onDragChange,
-        progress,
-        updateSlider,
-        debouncedOnChange,
-    ]);
-    // on mount, set the initial position of the slider
-    useEffect(() => {
-        if (didMount.current && value === absProgressRef.current)
-            return;
-        initialProgress(value);
-    }, [value, initialProgress]);
-    // set up slider
-    useEffect(() => {
-        const el = ref === null || ref === void 0 ? void 0 : ref.current;
-        el === null || el === void 0 ? void 0 : el.addEventListener('mousedown', handleMouseDown, false);
-        el === null || el === void 0 ? void 0 : el.addEventListener('touchstart', handleMouseDown, false);
-        return () => {
-            el === null || el === void 0 ? void 0 : el.removeEventListener('mousedown', handleMouseDown, false);
-            el === null || el === void 0 ? void 0 : el.removeEventListener('touchstart', handleMouseDown, false);
-        };
-    }, [handleMouseDown]);
-    // respond to size changes triggered by browser resizing as opposed to props
-    // note: this causes an extra render with every width prop change
-    useEffect(() => {
-        var _a;
-        const sliderWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-        if (!sliderWidth || size.width === 0)
-            return;
-        const max = relativeProgressRef.current === 1;
-        setTrackAndHead(relativeProgressRef.current * sliderWidth, max);
-    }, [size.width, setTrackAndHead]);
-    // memo head color
-    const trackHeadColor = useMemo(() => {
-        if (headType === 'none')
-            return 'transparent';
-        return headColor !== null && headColor !== void 0 ? headColor : 'var(--core-text-primary)';
-    }, [headColor, headType]);
-    // memo head height
-    const headSize = useMemo(() => {
-        if (headType === 'none')
-            return height;
-        return trackHeadSize;
-    }, [trackHeadSize, headType, height]);
-    // memo head width
-    const headWidth = useMemo(() => {
-        if (headType === 'round')
-            return trackHeadSize;
-        return trackHeadWidth;
-    }, [headType, trackHeadSize, trackHeadWidth]);
-    // set container width
-    const setWidth = useMemo(() => {
-        if (width && typeof width === 'string') {
-            if (width === 'auto')
-                return '100%';
-            return width;
-        }
-        return `${width !== null && width !== void 0 ? width : 100}px`;
-    }, [width]);
-    // memo css vars
-    const cssVars = useMemo(() => {
-        return {
-            '--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': headType === 'round' ? '100%' : '0px',
-            '--slider-head-size': `${headSize}px`,
-            '--slider-head-width': `${headWidth}px`,
-            '--slider-head-color': trackHeadColor,
-            '--slider-progress-color': progressColor !== null && progressColor !== void 0 ? progressColor : 'var(--core-text-primary)',
-            '--slider-track-color': trackColor !== null && trackColor !== void 0 ? 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-DbZSG5x3.js

@@ -1,14 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-import { jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
-
-const Spacer = React.memo((props) => {
-    const { size = 8 } = props, divAttributes = __rest(props, ["size"]);
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const spacerStyle = useMemo(() => ({ height: size, minHeight: size, maxHeight: size }), [size]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const 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-DjfrSiQz.js

@@ -1,41 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-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-tgCJW-Cu.js';
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.Switch-module_wrapper__OqM0E {\n\tpadding: var(--switch-padding) !important;\n\twidth: var(--switch-width);\n\theight: var(--switch-height);\n\tborder-radius: 100px;\n\tcursor: pointer;\n\tbackground: var(--switch-bg-color);\n\ttransition: background 0.25s ease-in-out 0s;\n}\n\n.Switch-module_knob__BLGda {\n\twidth: var(--switch-knob-size);\n\theight: var(--switch-knob-size);\n\tbackground: var(--switch-knob-color);\n\tborder-radius: 100%;\n}\n";
-var css = {"wrapper":"Switch-module_wrapper__OqM0E flexBox-module_row__PWxbe","knob":"Switch-module_knob__BLGda flexBox-module_row__PWxbe"};
-styleInject(css_248z);
-
-const Switch = React.memo((props) => {
-    const { state = false, height = 22, width = 44, padding = 3, bgColorOn = 'var(--feedback-positive)', bgColorOff = 'var(--core-text-disabled)', knobColor = 'var(--core-surface-primary)', onChange = () => null } = props, divAttributes = __rest(props, ["state", "height", "width", "padding", "bgColorOn", "bgColorOff", "knobColor", "onChange"]);
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    const [on, setOn] = useState(state);
-    // Sync with prop changes
-    useEffect(() => {
-        setOn(state);
-    }, [state]);
-    const handleClick = useCallback(() => {
-        setOn(!on);
-        onChange(!on);
-    }, [on, onChange]);
-    // Memoize style object
-    const justify = useMemo(() => ({ justifyContent: on ? 'flex-end' : 'flex-start' }), [on]);
-    // memo css vars
-    const cssVars = useMemo(() => {
-        return {
-            '--switch-width': `${width}px`,
-            '--switch-height': `${height}px`,
-            '--switch-padding': `${padding}px`,
-            '--switch-knob-size': `${height - padding * 2}px`,
-            '--switch-knob-color': knobColor,
-            '--switch-bg-color': on ? bgColorOn : bgColorOff,
-        };
-    }, [width, height, padding, bgColorOff, bgColorOn, on, knobColor]);
-    return (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-C0NgwRa2.js

@@ -1,174 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { useTheme } from '../hooks/useTheme.js';
-import '../theme/colors.js';
-import '../hooks/useWindow.js';
-import { B as Badge } from './Badge-DtxDLSO0.js';
-import { I as Icon } from './_types-RJ7q8S0B.js';
-import { I as IconButton } from './IconButton-3m9ugITV.js';
-import { T as ToolTipType } from './sharedTypes-BfZzG1KX.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_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";
-var css = {"wrapper":"TabBar-module_wrapper__z8Cvg flexBox-module_rowStart__nJZnW","option":"TabBar-module_option__Og-E4 flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G","icon":"TabBar-module_icon__LU5Rp flexBox-module_row__PWxbe","close":"TabBar-module_close__ytzs5 flexBox-module_row__PWxbe"};
-styleInject(css_248z);
-
-const placeholderOptions = [
-    { name: 'Option 1', value: 'Option 1', icon: null },
-    { name: 'Option 2', value: 'Option 2', icon: 'wallet' },
-];
-
-const TabBar = React.memo((props) => {
-    const { options = placeholderOptions, selected = 0, border = true, underline = true, height = '100%', width = '100%', tabWidth = 'distribute', padding = 8, iconSize = 20, iconGap = 8, tabGap = 0, disabled = false, hasClose = false, closeWidth = 'auto', selectedValue = null, onChange = () => null, onTabChange = () => null, onClose = () => null, onToolTip = () => null } = props, divAttributes = __rest(props, ["options", "selected", "border", "underline", "height", "width", "tabWidth", "padding", "iconSize", "iconGap", "tabGap", "disabled", "hasClose", "closeWidth", "selectedValue", "onChange", "onTabChange", "onClose", "onToolTip"]);
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    const [index, setIndex] = useState(selected);
-    useEffect(() => {
-        let selectedIndex = 0;
-        if (selectedValue && options) {
-            selectedIndex = options.findIndex((option) => option.value === selectedValue);
-            setIndex(selectedIndex === -1 ? selected : selectedIndex);
-        }
-        else {
-            setIndex(selected);
-        }
-    }, [selected, selectedValue, options]);
-    // memo handleClick
-    const handleClick = useCallback((i) => {
-        setIndex(i);
-        onChange(i);
-        onTabChange(options[i]);
-    }, [onChange, onTabChange, options]);
-    // memo handleOptionClick
-    const handleOptionClick = useCallback((i) => {
-        onToolTip(null);
-        handleClick(i);
-    }, [onToolTip, handleClick]);
-    // memo rendered options
-    const 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,
-    ]);
-    const setStyle = useCallback((value) => {
-        if (typeof value === 'string')
-            return value;
-        return `${value}px`;
-    }, []);
-    const cssVars = useMemo(() => {
-        return {
-            '--tab-bar-gap': `${tabGap}px`,
-            '--tab-bar-height': `${setStyle(height)}px`,
-            '--tab-bar-width': setStyle(width),
-            '--tab-bar-border-bottom': `${border ? '1px' : '0'}`,
-            '--tab-bar-close-width': `${closeWidth}px`,
-            '--tab-bar-close-padding': padding ? `${padding}px` : '8px',
-        };
-    }, [tabGap, height, width, border, setStyle, closeWidth, padding]);
-    return (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: false, hover: true, icon: 'x', onClick: onClose }) }))] })));
-});
-TabBar.displayName = 'TabBar';
-const Option = React.memo((props) => {
-    const theme = useTheme();
-    const { label = 'Option', value = 0, icon = null, selected = false, onClick = () => null, onToolTip = () => null, padding = 8, iconSize = 20, iconGap = 6, disabled = false, showToolTip = null, underline = true, tabWidth = 'distribute', count = 0, } = props;
-    const ref = useRef(null);
-    // memo icon color
-    const strokeColor = useMemo(() => {
-        if (!disabled && selected)
-            return theme.current.colors['core-text-special'];
-        if (disabled)
-            return theme.current.colors['core-text-disabled'];
-        return theme.current.colors['core-text-primary'];
-    }, [disabled, selected, theme]);
-    // memo handleMouseOver
-    const handleMouseOver = useCallback((e) => {
-        onToolTip(null);
-        if (showToolTip && ref.current) {
-            const tip = {
-                type: ToolTipType.button,
-                payload: { label: showToolTip },
-                event: e,
-                ref,
-            };
-            onToolTip(tip);
-        }
-    }, [showToolTip, onToolTip]);
-    // memo handleMouseLeave
-    const handleMouseLeave = useCallback(() => {
-        if (showToolTip)
-            onToolTip(null);
-    }, [showToolTip, onToolTip]);
-    // memo color
-    const textColor = useMemo(() => {
-        if (disabled)
-            return 'var(--core-text-disabled)';
-        if (selected)
-            return 'var(--core-text-special)';
-        return 'var(--core-text-primary)';
-    }, [disabled, selected]);
-    // memo tab width
-    const setTabWidth = useMemo(() => {
-        if (tabWidth === 'min-content')
-            return 'min-content';
-        if (tabWidth === 'distribute')
-            return 'unset';
-        return `${tabWidth}px`;
-    }, [tabWidth]);
-    // memo flex tab
-    const setTabFlex = useMemo(() => {
-        if (tabWidth === 'distribute')
-            return '1';
-        return 'unset';
-    }, [tabWidth]);
-    // memo underline
-    const setUnderline = useMemo(() => {
-        if (selected && underline && !disabled)
-            return '1px';
-        return '0';
-    }, [underline, disabled, selected]);
-    const cssVars = useMemo(() => {
-        return {
-            '--tab-bar-option-border': setUnderline,
-            '--tab-bar-option-padding': `${padding}px`,
-            '--tab-bar-option-icon-size': `${iconSize}px`,
-            '--tab-bar-option-cursor': disabled ? 'default' : 'pointer',
-            '--tab-bar-option-gap': `${iconGap !== null && iconGap !== void 0 ? iconGap : 0}px`,
-            '--tab-bar-option-color': textColor,
-            '--tab-bar-option-width': setTabWidth,
-            '--tab-bar-option-flex': setTabFlex,
-        };
-    }, [
-        padding,
-        iconSize,
-        disabled,
-        textColor,
-        iconGap,
-        setTabFlex,
-        setTabWidth,
-        setUnderline,
-    ]);
-    return (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, count !== 0 && (jsx(Badge, { variant: 'light', hideNull: false, count: count }))] }));
-}, (prevProps, nextProps) => {
-    // Custom comparison for performance
-    return (prevProps.selected === nextProps.selected &&
-        prevProps.underline === nextProps.underline &&
-        prevProps.tabWidth === nextProps.tabWidth &&
-        prevProps.disabled === nextProps.disabled &&
-        prevProps.iconGap === nextProps.iconGap &&
-        prevProps.iconSize === nextProps.iconSize &&
-        prevProps.count === nextProps.count &&
-        prevProps.label === nextProps.label &&
-        prevProps.icon === nextProps.icon);
-});
-Option.displayName = 'TabOption';
-
-export { TabBar as T };