@apple-pie/slice 0.0.6 → 0.0.8

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

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

package/dist/cjs/chunks/TextField-mfwz79cD.js

@@ -1,248 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('motion/react');
-var React = require('react');
-var hooks_useTheme = require('../hooks/useTheme.js');
-require('../theme/colors.js');
-require('../hooks/useWindow.js');
-var Button = require('./Button-BNXqiA13.js');
-var _types = require('./_types-BNlHsGMQ.js');
-var IconButton = require('./IconButton-9QZ4eKBZ.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_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.TextField-module_wrapper__I0Av0 {\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 0.25s ease-in-out 0s;\n}\n\n.TextField-module_container__0FwXa {\n\tflex: 1;\n\theight: 100%;\n\tgap: 8px;\n}\n\n.TextField-module_label__Jyh8E {\n\tcolor: var(--tf-label-color);\n\theight: auto;\n\toverflow: hidden;\n\twhite-space: nowrap;\n}\n\n.TextField-module_input__N140B {\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__Y-6u- {\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__sOwni {\n}\n\n.TextField-module_m__gsIsZ {\n}\n\n.TextField-module_l__f0HAD {\n}\n";
-var css = {"wrapper":"TextField-module_wrapper__I0Av0 flexBox-module_rowStart__nJZnW","container":"TextField-module_container__0FwXa flexBox-module_rowStart__nJZnW","label":"TextField-module_label__Jyh8E flexBox-module_rowStart__nJZnW","input":"TextField-module_input__N140B","showPassword":"TextField-module_showPassword__Y-6u- flexBox-module_row__PWxbe","s":"TextField-module_s__sOwni type-module_body-s-regular__8-FO-","m":"TextField-module_m__gsIsZ type-module_body-m-regular__Qtp5G","l":"TextField-module_l__f0HAD type-module_body-l-regular__Ar4d3"};
-styleInject_es.styleInject(css_248z);
-
-const MOTION_CONFIG = {
-    variants: {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-    },
-    transition: { ease: 'easeInOut', duration: 0.25 },
-};
-
-const TextField = React.memo((props) => {
-    const theme = hooks_useTheme.useTheme();
-    const { name = 'input_name', value = '', label = '', labelSize = 'm', textSize = 'm', placeholder = 'placeholder', focused = false, onSubmit = () => null, onChange = () => null, onBlur = () => null, onFocus = () => null, onKeydown = () => null, onAction = () => null, onPaste = () => null, onClear = () => null, onValidate = () => null, actionButton = false, maxLength = undefined, size = { width: '100%', height: 'auto' }, padding = '8px 16px', borderRadius = 8, editable = true, textAlign = 'left', isValid = true, inline = false, noShow = false, borderType = 'box', validate = true, borderColor = {
-        focused: 'var(--core-link-primary)',
-        blurred: 'var(--core-outline-primary)',
-        error: 'var(--feedback-warning)',
-    }, backgroundColor = {
-        focused: 'var(--core-surface-secondary)',
-        blurred: 'var(--core-surface-secondary)',
-    }, color = {
-        focused: 'var(--core-text-primary)',
-        blurred: 'var(--core-text-primary)',
-        error: 'var(--feedback-warning)',
-        placeholder: 'var(--core-text-disabled)',
-        disabled: 'var(--core-text-disabled)',
-        label: 'var(--core-text-tertiary)',
-    }, iconLeft = null, clearButton = { size: 20 }, clearBlurs = false, disabled = false, inputType = 'text' } = props, divAttributes = tslib_es6.__rest(props, ["name", "value", "label", "labelSize", "textSize", "placeholder", "focused", "onSubmit", "onChange", "onBlur", "onFocus", "onKeydown", "onAction", "onPaste", "onClear", "onValidate", "actionButton", "maxLength", "size", "padding", "borderRadius", "editable", "textAlign", "isValid", "inline", "noShow", "borderType", "validate", "borderColor", "backgroundColor", "color", "iconLeft", "clearButton", "clearBlurs", "disabled", "inputType"]);
-    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    const input = React.useRef(null);
-    const [text, setText] = React.useState(value);
-    const [isFocused, setIsFocused] = React.useState(focused);
-    const [valid, setValid] = React.useState(isValid);
-    const [show, setShow] = React.useState(false);
-    // update focused and blurred state on prop updates
-    React.useEffect(() => {
-        if (!input.current)
-            return;
-        if (focused) {
-            input.current.focus();
-        }
-        else {
-            input.current.blur();
-        }
-        setIsFocused(focused);
-    }, [focused]);
-    // update text value on prop change
-    React.useEffect(() => {
-        setText(value);
-    }, [value]);
-    // update valid on prop change
-    React.useEffect(() => {
-        setValid(isValid);
-    }, [isValid]);
-    // callback to check if the text is valid
-    const textIsValid = React.useCallback((entry) => {
-        if (!validate)
-            return;
-        const ok = entry.length > 1 || entry === '';
-        setValid(ok);
-        if (valid !== ok)
-            onValidate(ok);
-    }, [onValidate, valid, validate]);
-    // memo clear text field contents
-    const handleClearTextField = React.useCallback(() => {
-        if (input === null || input === void 0 ? void 0 : input.current) {
-            if (!clearBlurs)
-                input.current.focus();
-            setText('');
-            textIsValid('');
-        }
-        onChange('');
-        onClear();
-    }, [clearBlurs, onChange, onClear, textIsValid]);
-    // memo handling value updates based on input
-    const handleValueChange = React.useCallback((newValue) => {
-        setText(newValue);
-        onChange(newValue);
-        if (!valid)
-            textIsValid(text);
-    }, [onChange, textIsValid, text, valid]);
-    // memo blur handler
-    const handleBlur = React.useCallback(() => {
-        textIsValid(text);
-        setIsFocused(false);
-        onBlur(text);
-    }, [text, onBlur, textIsValid]);
-    // memo key stroke handling
-    const handleKeyDown = React.useCallback((e) => {
-        var _a;
-        if (e.key === 'Enter') {
-            handleBlur();
-            onSubmit(text);
-            (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
-        }
-        if (disabled) {
-            e.preventDefault();
-            return true;
-        }
-        onKeydown(e.key, e);
-    }, [text, disabled, onSubmit, onKeydown, handleBlur]);
-    // memo handle focus
-    const handleFocus = React.useCallback(() => {
-        setIsFocused(true);
-        onFocus(text);
-    }, [text, onFocus]);
-    // memo toggle show (for passwords)
-    const toggleShow = React.useCallback(() => {
-        setShow((prev) => !prev);
-    }, []);
-    // memo icon style
-    const iconContainerStyle = React.useMemo(() => iconLeft ? { width: iconLeft.size, height: iconLeft.size } : undefined, [iconLeft]);
-    // memo icon color
-    const iconStrokeColor = React.useMemo(() => (iconLeft === null || iconLeft === void 0 ? void 0 : iconLeft.color)
-        ? iconLeft.color
-        : theme.current.colors['core-icon-secondary'], [iconLeft, theme]);
-    // memo show clear button
-    const clearButtonStyle = React.useMemo(() => clearButton
-        ? { width: clearButton.size, height: clearButton.size }
-        : undefined, [clearButton]);
-    // process style values that are string, number or undefined
-    const setStyleValue = React.useCallback((value) => {
-        if (value === undefined)
-            return 'unset';
-        if (typeof value === 'string')
-            return value;
-        return `${value}px`;
-    }, []);
-    // memo background color
-    const setBackgroundColor = React.useMemo(() => {
-        var _a, _b;
-        if (inline)
-            return 'unset';
-        if (isFocused)
-            return (_a = backgroundColor.focused) !== null && _a !== void 0 ? _a : 'transparent';
-        return (_b = backgroundColor.blurred) !== null && _b !== void 0 ? _b : 'transparent';
-    }, [inline, isFocused, backgroundColor]);
-    // memo border color
-    const setBorderColor = React.useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        if (borderType === 'none')
-            return 'transparent';
-        if (validate && !valid)
-            return (_b = (_a = borderColor.error) !== null && _a !== void 0 ? _a : borderColor.blurred) !== null && _b !== void 0 ? _b : 'transparent';
-        if (isFocused)
-            return (_d = (_c = borderColor.focused) !== null && _c !== void 0 ? _c : borderColor.blurred) !== null && _d !== void 0 ? _d : 'transparent';
-        return (_e = borderColor.blurred) !== null && _e !== void 0 ? _e : 'transparent';
-    }, [borderType, valid, isFocused, borderColor, validate]);
-    // memo box shadow (border style)
-    const setBoxShadow = React.useMemo(() => {
-        if (borderType === 'none')
-            return 'unset';
-        if (borderType === 'underline')
-            return `0 1px 0 0 ${setBorderColor}`;
-        return `0 0 0 1px ${setBorderColor}`;
-    }, [borderType, setBorderColor]);
-    // memo text color
-    const textColor = React.useMemo(() => {
-        var _a, _b, _c;
-        if (validate && !valid)
-            return (_a = color.error) !== null && _a !== void 0 ? _a : 'var(--core-text-primary)';
-        if (isFocused)
-            return (_b = color.focused) !== null && _b !== void 0 ? _b : 'var(--core-text-primary)';
-        return (_c = color.blurred) !== null && _c !== void 0 ? _c : 'var(--core-text-primary)';
-    }, [isFocused, valid, color, validate]);
-    // memo text align
-    const setTextAlign = React.useMemo(() => {
-        return textAlign !== null && textAlign !== void 0 ? textAlign : 'left';
-    }, [textAlign]);
-    // memo opacity password show / hide
-    const setShowOpacity = React.useMemo(() => {
-        if (inputType !== 'password')
-            return '0';
-        if (isFocused)
-            return '1';
-        return '0.5';
-    }, [inputType, isFocused]);
-    // memo css vars
-    const cssVars = React.useMemo(() => {
-        var _a, _b;
-        return {
-            '--tf-width': setStyleValue(size.width),
-            '--tf-height': setStyleValue(size.height),
-            '--tf-padding': setStyleValue(padding),
-            '--tf-padding-label-left': label === '' ? 'unset' : '0',
-            '--tf-border-radius': setStyleValue(borderRadius),
-            '--tf-bg-color': setBackgroundColor,
-            '--tf-box-shadow': setBoxShadow,
-            '--tf-color': textColor,
-            '--tf-label-color': (_a = color.label) !== null && _a !== void 0 ? _a : 'var(--core-text-disabled)',
-            '--tf-text-align': setTextAlign,
-            '--tf-show-opacity': setShowOpacity,
-            '--tf-placeholder-color': (_b = color.placeholder) !== null && _b !== void 0 ? _b : 'var(--core-text-disabled)',
-        };
-    }, [
-        size,
-        padding,
-        label,
-        borderRadius,
-        setStyleValue,
-        setBackgroundColor,
-        setBoxShadow,
-        textColor,
-        setTextAlign,
-        setShowOpacity,
-        color,
-    ]);
-    return (jsxRuntime.jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars) }, rest, { children: [label && (jsxRuntime.jsx("div", { className: `${css.label} ${css[labelSize]}`, children: label })), jsxRuntime.jsxs("div", { className: css.container, children: [iconLeft && (jsxRuntime.jsx("div", { style: iconContainerStyle, children: jsxRuntime.jsx(_types.Icon, { name: iconLeft.name, size: iconLeft.size, strokeColor: iconStrokeColor }) })), jsxRuntime.jsx("input", { className: `${css.input} ${css[textSize]}`, ref: input, type: inputType === 'password' && show ? 'text' : inputType, name: name, "aria-label": name, autoCapitalize: 'none', autoCorrect: 'off', autoComplete: 'off', value: text, onChange: (e) => handleValueChange(e.target.value), onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: (e) => e.stopPropagation(), disabled: !editable, maxLength: maxLength }), jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isFocused && clearButton && text !== '' && (jsxRuntime.jsx(react.motion.div, { className: css.clearButton, style: clearButtonStyle, variants: MOTION_CONFIG.variants, initial: 'initial', animate: 'animate', exit: 'exit', transition: MOTION_CONFIG.transition, onClick: handleClearTextField, children: jsxRuntime.jsx(_types.Icon, { name: 'x', size: clearButton.size, strokeColor: theme.current.colors['core-icon-secondary'] }) })) }), jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: actionButton && (jsxRuntime.jsx(react.motion.div, { variants: MOTION_CONFIG.variants, initial: 'initial', animate: 'animate', exit: 'exit', transition: MOTION_CONFIG.transition, children: jsxRuntime.jsx(Button.Button, { label: 'Translate', variant: 'text', size: 'text', state: text === '' ? 'disabled' : 'normal', labelColor: theme.current.colors['core-button-primary'], onClick: onAction }) })) }), inputType === 'password' && !noShow && (jsxRuntime.jsx("div", { className: css.showPassword, children: jsxRuntime.jsx(IconButton.IconButton, { icon: 'view', toggleIcon: true, toggle: false, isToggled: show, iconSize: 18, frameSize: 18, onClick: toggleShow, tooltip: 'Show / Hide', disabled: false }) }))] })] })));
-}, (prevProps, nextProps) => {
-    // Custom comparison for expensive props
-    return (prevProps.value === nextProps.value &&
-        prevProps.borderType === nextProps.borderType &&
-        prevProps.borderRadius === nextProps.borderRadius &&
-        prevProps.borderColor === nextProps.borderColor &&
-        prevProps.labelSize === nextProps.labelSize &&
-        prevProps.focused === nextProps.focused &&
-        prevProps.isValid === nextProps.isValid &&
-        prevProps.validate === nextProps.validate &&
-        prevProps.disabled === nextProps.disabled &&
-        prevProps.color === nextProps.color &&
-        prevProps.label === nextProps.label &&
-        prevProps.inputType === nextProps.inputType &&
-        prevProps.textSize === nextProps.textSize &&
-        prevProps.padding === nextProps.padding &&
-        prevProps.textAlign === nextProps.textAlign &&
-        prevProps.placeholder === nextProps.placeholder);
-});
-TextField.displayName = 'TextField';
-
-exports.TextField = TextField;

package/dist/cjs/chunks/Tip-Af6FMEDi.js

@@ -1,91 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-4H29ixHs.js');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('motion/react');
-var React = require('react');
-var utils = require('./utils-BwNacfBU.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_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.Tip-module_wrapper__5Oi05 {\n\tpadding: var(--tooltip-padding) !important;\n\tposition: fixed;\n\tborder: var(--tooltip-border);\n\tborder-radius: var(--tooltip-border-radius);\n\tbackground: var(--tooltip-background);\n\tz-index: var(--elevation-describe);\n}\n\n.Tip-module_s__URuK6 {\n}\n\n.Tip-module_m__A1uk0 {\n}\n.Tip-module_l__kNOKI {\n}\n";
-var css = {"wrapper":"Tip-module_wrapper__5Oi05 flexBox-module_rowStart__nJZnW","s":"Tip-module_s__URuK6 type-module_body-s-regular__8-FO-","m":"Tip-module_m__A1uk0 type-module_body-m-regular__Qtp5G","l":"Tip-module_l__kNOKI type-module_body-l-regular__Ar4d3"};
-styleInject_es.styleInject(css_248z);
-
-const tipBasePos = { left: 0, top: 0 };
-
-const TipBase = React.forwardRef((props, ref) => {
-    var _a;
-    const { tip, size = 's', bgColor, color, border = true, borderColor, padding, radius, coords, showDelay = 500, hideDelay = 2500 } = props, divAttributes = tslib_es6.__rest(props, ["tip", "size", "bgColor", "color", "border", "borderColor", "padding", "radius", "coords", "showDelay", "hideDelay"]);
-    // div attributes to add
-    const { id: divId, className, style } = divAttributes, rest = tslib_es6.__rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? `${className}` : '';
-    // set tip position and display timer
-    // need the animate set only after the ready state is processed
-    const [pos, setPos] = React.useState(tipBasePos);
-    const [ready, setReady] = React.useState(false);
-    const [animate, setAnimate] = React.useState(false);
-    const timer = React.useRef(null);
-    // update position with delay and then auto remove
-    React.useEffect(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        const { x, y } = coords !== null && coords !== void 0 ? coords : { x: 0, y: 0 };
-        const showTip = x > 0 && y > 0;
-        if (showTip) {
-            timer.current = setTimeout(() => {
-                var _a, _b;
-                setPos({ left: (_a = coords === null || coords === void 0 ? void 0 : coords.x) !== null && _a !== void 0 ? _a : 0, top: (_b = coords === null || coords === void 0 ? void 0 : coords.y) !== null && _b !== void 0 ? _b : 0 });
-                setReady(true);
-                if (timer.current)
-                    clearTimeout(timer.current);
-                timer.current = setTimeout(() => {
-                    setReady(false);
-                    setPos({ left: 0, top: 0 });
-                }, hideDelay);
-            }, showDelay);
-        }
-        else {
-            setReady(false);
-            setPos({ left: 0, top: 0 });
-        }
-        // clean up timers
-        return () => {
-            if (timer.current)
-                clearTimeout(timer.current);
-        };
-    }, [coords, showDelay, hideDelay]);
-    // when ready, visibility has taken effect and can now be animated
-    React.useEffect(() => setAnimate(ready), [ready]);
-    // memo css vars
-    const cssVars = React.useMemo(() => {
-        return {
-            '--tooltip-padding': padding !== null && padding !== void 0 ? padding : '3px 6px',
-            '--tooltip-background': bgColor !== null && bgColor !== void 0 ? bgColor : 'var(--core-surface-secondary)',
-            '--tooltip-color': color !== null && color !== void 0 ? color : 'var(--core-text-primary)',
-            '--tooltip-border': border
-                ? `1px solid ${borderColor !== null && borderColor !== void 0 ? borderColor : 'var(--core-outline-primary)'}`
-                : 'unset',
-            '--tooltip-border-radius': radius !== null && radius !== void 0 ? radius : '4px',
-        };
-    }, [padding, bgColor, color, border, borderColor, radius]);
-    // memo coords style
-    const coordStyle = React.useMemo(() => {
-        const { left, top } = pos;
-        return {
-            left: `${left !== null && left !== void 0 ? left : 0}px`,
-            top: `${top !== null && top !== void 0 ? top : 0}px`,
-        };
-    }, [pos]);
-    // memo class names
-    const classNames = React.useMemo(() => {
-        return utils.filterClasses([css.wrapper, css[size], divClass]);
-    }, [size, divClass]);
-    return (jsxRuntime.jsx(react.motion.div, Object.assign({ ref: ref, id: divId, className: classNames, onKeyDown: () => null, style: Object.assign(Object.assign(Object.assign(Object.assign({}, divStyle), cssVars), coordStyle), { visibility: ready ? 'visible' : 'hidden' }), initial: { opacity: 0 }, animate: animate
-            ? { opacity: 1, transition: { ease: 'easeInOut', duration: 0.25 } }
-            : undefined, exit: { opacity: 0, transition: { duration: 0 } } }, rest, { children: (_a = tip === null || tip === void 0 ? void 0 : tip.payload) === null || _a === void 0 ? void 0 : _a.label })));
-});
-TipBase.displayName = 'Tip';
-const Tip = React.memo(TipBase);
-
-exports.Tip = Tip;