@apple-pie/slice 0.0.1 → 0.0.3

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

@@ -0,0 +1,248 @@
+'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 _types = require('./_types-CoWzQFsT.js');
+var IconButton = require('./IconButton-BfsPlKTb.js');
+var UIButton = require('./UIButton-CH4p-8yq.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.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(UIButton.UIButton, { 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-C2pzExut.js

@@ -0,0 +1,91 @@
+'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-CbayehuI.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.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: 10;\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;

package/dist/cjs/chunks/Toast-DrijUwoL.js

@@ -0,0 +1,141 @@
+'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 utils = require('./utils-CbayehuI.js');
+var _types = require('./_types-CoWzQFsT.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Toast-module_wrapper__WglRd {\n\tpadding: var(--toast-padding) !important;\n\tcolor: var(--toast-color);\n\tposition: fixed;\n\tborder: var(--toast-border);\n\tborder-radius: var(--toast-border-radius);\n\tbackground: var(--toast-background);\n\tz-index: 10;\n\tgap: 16px;\n\tbox-shadow: var(--surface-shadow-soft);\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.Toast-module_close__fIkbN {\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tmin-width: 20px;\n\tmax-width: 20px;\n}\n\n.Toast-module_s__eexrd {\n}\n\n.Toast-module_m__eByaG {\n}\n.Toast-module_l__t7hfh {\n}\n";
+var css = {"wrapper":"Toast-module_wrapper__WglRd flexBox-module_rowBetween__27lKK","close":"Toast-module_close__fIkbN flexBox-module_row__PWxbe","s":"Toast-module_s__eexrd type-module_body-s-regular__8-FO-","m":"Toast-module_m__eByaG type-module_body-m-regular__Qtp5G","l":"Toast-module_l__t7hfh type-module_body-l-regular__Ar4d3"};
+styleInject_es.styleInject(css_248z);
+
+exports.ToastType = void 0;
+(function (ToastType) {
+    ToastType["Success"] = "success";
+    ToastType["Error"] = "error";
+    ToastType["Warning"] = "warning";
+    ToastType["Info"] = "info";
+})(exports.ToastType || (exports.ToastType = {}));
+
+const ToastBase = React.forwardRef((props, ref) => {
+    const { message = null, size = 'm', border = true, padding, radius = 8, showDelay = 0, duration = 5000, position = 'bottom', offset = 24, close = true, type = exports.ToastType.Info, didHide = () => null } = props, divAttributes = tslib_es6.__rest(props, ["message", "size", "border", "padding", "radius", "showDelay", "duration", "position", "offset", "close", "type", "didHide"]);
+    const theme = hooks_useTheme.useTheme();
+    // 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}` : '';
+    // need the animate set only after the ready state is processed
+    const [ready, setReady] = React.useState(false);
+    const [content, setContent] = React.useState(null);
+    const timer = React.useRef(null);
+    // update show and animation
+    React.useEffect(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        const show = message && message.length > 0;
+        if (show) {
+            timer.current = setTimeout(() => {
+                setContent(message);
+                if (timer.current)
+                    clearTimeout(timer.current);
+                timer.current = setTimeout(() => {
+                    setReady(false);
+                }, duration);
+            }, showDelay);
+        }
+        else {
+            setContent(null);
+        }
+        // clean up timers
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [message, showDelay, duration]);
+    // ready to animate in/out
+    React.useEffect(() => setReady(content !== null), [content]);
+    // set the default padding accommodating the close icon fix
+    const defaultPadding = React.useMemo(() => {
+        return close ? '10px 12px 10px 16px' : '10px 16px';
+    }, [close]);
+    const colorScheme = React.useMemo(() => {
+        switch (type) {
+            case 'success':
+                return {
+                    border: 'var(--array-land-label)',
+                    bg: 'var(--array-land)',
+                    text: 'var(--array-land-label)',
+                };
+            case 'warning':
+                return {
+                    border: 'var(--array-orange-label)',
+                    bg: 'var(--array-orange)',
+                    text: 'var(--array-orange-label)',
+                };
+            case 'error':
+                return {
+                    border: 'var(--feedback-warning)',
+                    bg: 'var(--array-magenta)',
+                    text: 'var(--feedback-warning)',
+                };
+            default:
+                return {
+                    border: 'var(--core-outline-primary)',
+                    bg: 'var(--core-surface-secondary)',
+                    text: 'var(--core-text-primary)',
+                };
+        }
+    }, [type]);
+    // memo css vars
+    const cssVars = React.useMemo(() => {
+        return {
+            '--toast-padding': utils.setStyle(padding, defaultPadding),
+            '--toast-background': colorScheme.bg,
+            '--toast-color': colorScheme.text,
+            '--toast-border': border ? `1px solid ${colorScheme.border}` : 'unset',
+            '--toast-border-radius': utils.setStyle(radius, 4),
+        };
+    }, [padding, border, colorScheme, radius, defaultPadding]);
+    const variants = React.useMemo(() => {
+        const positionShow = position === 'bottom' ? { bottom: offset } : { top: offset };
+        const positionHide = position === 'bottom' ? { bottom: -offset } : { top: -offset };
+        const transition = { ease: 'easeInOut', duration: 0.25 };
+        return {
+            initial: Object.assign({ opacity: 0 }, positionHide),
+            animate: Object.assign(Object.assign({ opacity: 1 }, positionShow), { transition }),
+            exit: Object.assign(Object.assign({ opacity: 0 }, positionHide), { transition }),
+        };
+    }, [position, offset]);
+    // memo class names
+    const classNames = React.useMemo(() => {
+        return utils.filterClasses([css.wrapper, css[size], divClass]);
+    }, [size, divClass]);
+    // hide on close
+    const handleClose = React.useCallback(() => {
+        setReady(false);
+    }, []);
+    // prevent hide on hover / focus
+    const handleMouseOver = React.useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    // rest hide on mouse out / blur
+    const handleMouseOut = React.useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            setContent(null);
+        }, duration);
+    }, [duration]);
+    return (jsxRuntime.jsx(react.AnimatePresence, { onExitComplete: () => didHide(), initial: false, children: ready && (jsxRuntime.jsxs(react.motion.div, Object.assign({ ref: ref, id: divId, className: classNames }, rest, { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseOut, onFocus: handleMouseOver, onBlur: handleMouseOut, style: Object.assign(Object.assign(Object.assign({}, divStyle), cssVars), { visibility: ready ? 'visible' : 'hidden' }), variants: variants, initial: 'initial', animate: 'animate', exit: 'exit', children: [jsxRuntime.jsx("div", { role: 'status', "aria-live": 'polite', className: css.message, children: content }), close && (jsxRuntime.jsx("div", { className: css.close, tabIndex: 0, role: 'button', "aria-label": 'dismiss message', onKeyDown: (e) => utils.accessibleKeyDown(e, handleClose), onClick: handleClose, children: jsxRuntime.jsx(_types.Icon, { name: 'x', size: 20, strokeColor: theme.current.colors['core-icon-primary'] }) }))] }))) }));
+});
+ToastBase.displayName = 'Toast';
+const Toast = React.memo(ToastBase);
+
+exports.Toast = Toast;