@apple-pie/slice 0.0.5 → 0.0.7

package/dist/esm/chunks/TextField-Co0u-xdd.mjs

@@ -0,0 +1,222 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, motion } from "motion/react";
+
+import React, { useRef, useState, useEffect, useCallback, useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { B as Button } from "./Button-B_aIY6wE.mjs";
+
+import { I as Icon } from "./_types-KZDzhaiK.mjs";
+
+import { I as IconButton } from "./IconButton-BBiZrXlS.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+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(".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");
+
+const MOTION_CONFIG = {
+    variants: {
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        },
+        exit: {
+            opacity: 0
+        }
+    },
+    transition: {
+        ease: "easeInOut",
+        duration: .25
+    }
+}, TextField = React.memo(props => {
+    const theme = useTheme(), {name: name = "input_name", value: value = "", label: label = "", labelSize: labelSize = "m", textSize: textSize = "m", placeholder: placeholder = "placeholder", focused: focused = !1, onSubmit: onSubmit = () => null, onChange: onChange = () => null, onBlur: onBlur = () => null, onFocus: onFocus = () => null, onKeydown: onKeydown = () => null, onAction: onAction = () => null, onPaste: onPaste = () => null, onClear: onClear = () => null, onValidate: onValidate = () => null, actionButton: actionButton = !1, maxLength: maxLength, size: size = {
+        width: "100%",
+        height: "auto"
+    }, padding: padding = "8px 16px", borderRadius: borderRadius = 8, editable: editable = !0, textAlign: textAlign = "left", isValid: isValid = !0, inline: inline = !1, noShow: noShow = !1, borderType: borderType = "box", validate: validate = !0, borderColor: borderColor = {
+        focused: "var(--core-link-primary)",
+        blurred: "var(--core-outline-primary)",
+        error: "var(--feedback-warning)"
+    }, backgroundColor: backgroundColor = {
+        focused: "var(--core-surface-secondary)",
+        blurred: "var(--core-surface-secondary)"
+    }, color: 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: iconLeft = null, clearButton: clearButton = {
+        size: 20
+    }, clearBlurs: clearBlurs = !1, disabled: disabled = !1, inputType: inputType = "text"} = props, divAttributes = __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" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", input = useRef(null), [text, setText] = useState(value), [isFocused, setIsFocused] = useState(focused), [valid, setValid] = useState(isValid), [show, setShow] = useState(!1);
+    useEffect(() => {
+        input.current && (focused ? input.current.focus() : input.current.blur(), setIsFocused(focused));
+    }, [ focused ]), useEffect(() => {
+        setText(value);
+    }, [ value ]), useEffect(() => {
+        setValid(isValid);
+    }, [ isValid ]);
+    const textIsValid = useCallback(entry => {
+        if (!validate) return;
+        const ok = entry.length > 1 || "" === entry;
+        setValid(ok), valid !== ok && onValidate(ok);
+    }, [ onValidate, valid, validate ]), handleClearTextField = useCallback(() => {
+        (null == input ? void 0 : input.current) && (clearBlurs || input.current.focus(), 
+        setText(""), textIsValid("")), onChange(""), onClear();
+    }, [ clearBlurs, onChange, onClear, textIsValid ]), handleValueChange = useCallback(newValue => {
+        setText(newValue), onChange(newValue), valid || textIsValid(text);
+    }, [ onChange, textIsValid, text, valid ]), handleBlur = useCallback(() => {
+        textIsValid(text), setIsFocused(!1), onBlur(text);
+    }, [ text, onBlur, textIsValid ]), handleKeyDown = useCallback(e => {
+        var _a;
+        if ("Enter" === e.key && (handleBlur(), onSubmit(text), null === (_a = input.current) || void 0 === _a || _a.blur()), 
+        disabled) return e.preventDefault(), !0;
+        onKeydown(e.key, e);
+    }, [ text, disabled, onSubmit, onKeydown, handleBlur ]), handleFocus = useCallback(() => {
+        setIsFocused(!0), onFocus(text);
+    }, [ text, onFocus ]), toggleShow = useCallback(() => {
+        setShow(prev => !prev);
+    }, []), iconContainerStyle = useMemo(() => iconLeft ? {
+        width: iconLeft.size,
+        height: iconLeft.size
+    } : void 0, [ iconLeft ]), iconStrokeColor = useMemo(() => (null == iconLeft ? void 0 : iconLeft.color) ? iconLeft.color : theme.current.colors["core-icon-secondary"], [ iconLeft, theme ]), clearButtonStyle = useMemo(() => clearButton ? {
+        width: clearButton.size,
+        height: clearButton.size
+    } : void 0, [ clearButton ]), setStyleValue = useCallback(value => void 0 === value ? "unset" : "string" == typeof value ? value : `${value}px`, []), setBackgroundColor = useMemo(() => {
+        var _a, _b;
+        return inline ? "unset" : isFocused ? null !== (_a = backgroundColor.focused) && void 0 !== _a ? _a : "transparent" : null !== (_b = backgroundColor.blurred) && void 0 !== _b ? _b : "transparent";
+    }, [ inline, isFocused, backgroundColor ]), setBorderColor = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return "none" === borderType ? "transparent" : validate && !valid ? null !== (_b = null !== (_a = borderColor.error) && void 0 !== _a ? _a : borderColor.blurred) && void 0 !== _b ? _b : "transparent" : isFocused ? null !== (_d = null !== (_c = borderColor.focused) && void 0 !== _c ? _c : borderColor.blurred) && void 0 !== _d ? _d : "transparent" : null !== (_e = borderColor.blurred) && void 0 !== _e ? _e : "transparent";
+    }, [ borderType, valid, isFocused, borderColor, validate ]), setBoxShadow = useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = useMemo(() => {
+        var _a, _b, _c;
+        return validate && !valid ? null !== (_a = color.error) && void 0 !== _a ? _a : "var(--core-text-primary)" : isFocused ? null !== (_b = color.focused) && void 0 !== _b ? _b : "var(--core-text-primary)" : null !== (_c = color.blurred) && void 0 !== _c ? _c : "var(--core-text-primary)";
+    }, [ isFocused, valid, color, validate ]), setTextAlign = useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), cssVars = useMemo(() => {
+        var _a, _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": null !== (_a = color.label) && void 0 !== _a ? _a : "var(--core-text-disabled)",
+            "--tf-text-align": setTextAlign,
+            "--tf-show-opacity": setShowOpacity,
+            "--tf-placeholder-color": null !== (_b = color.placeholder) && void 0 !== _b ? _b : "var(--core-text-disabled)"
+        };
+    }, [ size, padding, label, borderRadius, setStyleValue, setBackgroundColor, setBoxShadow, textColor, setTextAlign, setShowOpacity, color ]);
+    return jsxs("div", Object.assign({
+        id: divId,
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: [ label && jsx("div", {
+            className: `${css.label} ${css[labelSize]}`,
+            children: label
+        }), jsxs("div", {
+            className: css.container,
+            children: [ iconLeft && jsx("div", {
+                style: iconContainerStyle,
+                children: jsx(Icon, {
+                    name: iconLeft.name,
+                    size: iconLeft.size,
+                    strokeColor: iconStrokeColor
+                })
+            }), jsx("input", {
+                className: `${css.input} ${css[textSize]}`,
+                ref: input,
+                type: "password" === inputType && 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
+            }), jsx(AnimatePresence, {
+                initial: !1,
+                children: isFocused && clearButton && "" !== text && jsx(motion.div, {
+                    className: css.clearButton,
+                    style: clearButtonStyle,
+                    variants: MOTION_CONFIG.variants,
+                    initial: "initial",
+                    animate: "animate",
+                    exit: "exit",
+                    transition: MOTION_CONFIG.transition,
+                    onClick: handleClearTextField,
+                    children: jsx(Icon, {
+                        name: "x",
+                        size: clearButton.size,
+                        strokeColor: theme.current.colors["core-icon-secondary"]
+                    })
+                })
+            }), jsx(AnimatePresence, {
+                initial: !1,
+                children: actionButton && jsx(motion.div, {
+                    variants: MOTION_CONFIG.variants,
+                    initial: "initial",
+                    animate: "animate",
+                    exit: "exit",
+                    transition: MOTION_CONFIG.transition,
+                    children: jsx(Button, {
+                        label: "Translate",
+                        variant: "text",
+                        size: "text",
+                        state: "" === text ? "disabled" : "normal",
+                        labelColor: theme.current.colors["core-button-primary"],
+                        onClick: onAction
+                    })
+                })
+            }), "password" === inputType && !noShow && jsx("div", {
+                className: css.showPassword,
+                children: jsx(IconButton, {
+                    icon: "view",
+                    toggleIcon: !0,
+                    toggle: !1,
+                    isToggled: show,
+                    iconSize: 18,
+                    frameSize: 18,
+                    onClick: toggleShow,
+                    tooltip: "Show / Hide",
+                    disabled: !1
+                })
+            }) ]
+        }) ]
+    }));
+}, (prevProps, nextProps) => 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";
+
+export { TextField as T };

package/dist/esm/chunks/Tip-CHQh-Yq0.mjs

@@ -0,0 +1,98 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { useState, useRef, useEffect, useMemo } from "react";
+
+import { f as filterClasses } from "./utils-BQ1v7VE4.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+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(".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");
+
+const tipBasePos = {
+    left: 0,
+    top: 0
+}, TipBase = React.forwardRef((props, ref) => {
+    var _a;
+    const {tip: tip, size: size = "s", bgColor: bgColor, color: color, border: border = !0, borderColor: borderColor, padding: padding, radius: radius, coords: coords, showDelay: showDelay = 500, hideDelay: hideDelay = 2500} = props, divAttributes = __rest(props, [ "tip", "size", "bgColor", "color", "border", "borderColor", "padding", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = useState(tipBasePos), [ready, setReady] = useState(!1), [animate, setAnimate] = useState(!1), timer = useRef(null);
+    useEffect(() => {
+        timer.current && clearTimeout(timer.current);
+        const {x: x, y: y} = null != coords ? coords : {
+            x: 0,
+            y: 0
+        };
+        return x > 0 && y > 0 ? timer.current = setTimeout(() => {
+            var _a, _b;
+            setPos({
+                left: null !== (_a = null == coords ? void 0 : coords.x) && void 0 !== _a ? _a : 0,
+                top: null !== (_b = null == coords ? void 0 : coords.y) && void 0 !== _b ? _b : 0
+            }), setReady(!0), timer.current && clearTimeout(timer.current), timer.current = setTimeout(() => {
+                setReady(!1), setPos({
+                    left: 0,
+                    top: 0
+                });
+            }, hideDelay);
+        }, showDelay) : (setReady(!1), setPos({
+            left: 0,
+            top: 0
+        })), () => {
+            timer.current && clearTimeout(timer.current);
+        };
+    }, [ coords, showDelay, hideDelay ]), useEffect(() => setAnimate(ready), [ ready ]);
+    const cssVars = useMemo(() => ({
+        "--tooltip-padding": null != padding ? padding : "3px 6px",
+        "--tooltip-background": null != bgColor ? bgColor : "var(--core-surface-secondary)",
+        "--tooltip-color": null != color ? color : "var(--core-text-primary)",
+        "--tooltip-border": border ? `1px solid ${null != borderColor ? borderColor : "var(--core-outline-primary)"}` : "unset",
+        "--tooltip-border-radius": null != radius ? radius : "4px"
+    }), [ padding, bgColor, color, border, borderColor, radius ]), coordStyle = useMemo(() => {
+        const {left: left, top: top} = pos;
+        return {
+            left: `${null != left ? left : 0}px`,
+            top: `${null != top ? top : 0}px`
+        };
+    }, [ pos ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]);
+    return jsx(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: .25
+            }
+        } : void 0,
+        exit: {
+            opacity: 0,
+            transition: {
+                duration: 0
+            }
+        }
+    }, rest, {
+        children: null === (_a = null == tip ? void 0 : tip.payload) || void 0 === _a ? void 0 : _a.label
+    }));
+});
+
+TipBase.displayName = "Tip";
+
+const Tip = React.memo(TipBase);
+
+export { Tip as T };

package/dist/esm/chunks/Toast-BiXzVFtM.mjs

@@ -0,0 +1,179 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import { AnimatePresence, motion } from "motion/react";
+
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./utils-BQ1v7VE4.mjs";
+
+import { I as Icon } from "./_types-KZDzhaiK.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var ToastType, 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(".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.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: var(--elevation-status);\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"), 
+function(ToastType) {
+    ToastType.Success = "success", ToastType.Error = "error", ToastType.Warning = "warning", 
+    ToastType.Info = "info";
+}(ToastType || (ToastType = {}));
+
+const ToastBase = React.forwardRef((props, ref) => {
+    const {message: message = null, size: size = "m", border: border = !0, padding: padding, radius: radius = 8, showDelay: showDelay = 0, duration: duration = 5e3, position: position = "bottom", offset: offset = 24, close: close = !0, type: type = ToastType.Info, didHide: didHide = () => null} = props, divAttributes = __rest(props, [ "message", "size", "border", "padding", "radius", "showDelay", "duration", "position", "offset", "close", "type", "didHide" ]), theme = useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = useState(!1), [content, setContent] = useState(null), timer = useRef(null);
+    useEffect(() => {
+        timer.current && clearTimeout(timer.current);
+        return message && message.length > 0 ? timer.current = setTimeout(() => {
+            setContent(message), timer.current && clearTimeout(timer.current), "Infinite" !== duration && (timer.current = setTimeout(() => {
+                setReady(!1);
+            }, duration));
+        }, showDelay) : setContent(null), () => {
+            timer.current && clearTimeout(timer.current);
+        };
+    }, [ message, showDelay, duration ]), useEffect(() => setReady(null !== content), [ content ]);
+    const defaultPadding = useMemo(() => close ? "10px 12px 10px 16px" : "10px 16px", [ close ]), colorScheme = 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 ]), cssVars = useMemo(() => ({
+        "--toast-padding": setStyle(padding, defaultPadding),
+        "--toast-background": colorScheme.bg,
+        "--toast-color": colorScheme.text,
+        "--toast-border": border ? `1px solid ${colorScheme.border}` : "unset",
+        "--toast-border-radius": setStyle(radius, 4)
+    }), [ padding, border, colorScheme, radius, defaultPadding ]), variants = useMemo(() => {
+        const positionShow = "bottom" === position ? {
+            bottom: offset
+        } : {
+            top: offset
+        }, positionHide = "bottom" === position ? {
+            bottom: -offset
+        } : {
+            top: -offset
+        }, transition = {
+            ease: "easeInOut",
+            duration: .25
+        };
+        return {
+            initial: Object.assign({
+                opacity: 0
+            }, positionHide),
+            animate: Object.assign(Object.assign({
+                opacity: 1
+            }, positionShow), {
+                transition: transition
+            }),
+            exit: Object.assign(Object.assign({
+                opacity: 0
+            }, positionHide), {
+                transition: transition
+            })
+        };
+    }, [ position, offset ]), classNames = useMemo(() => filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]), handleClose = useCallback(() => {
+        setReady(!1);
+    }, []), handleMouseOver = useCallback(() => {
+        timer.current && clearTimeout(timer.current);
+    }, []), handleMouseOut = useCallback(() => {
+        timer.current && clearTimeout(timer.current), "Infinite" !== duration && (timer.current = setTimeout(() => {
+            setContent(null);
+        }, duration));
+    }, [ duration ]), iconColor = useMemo(() => {
+        switch (type) {
+          case ToastType.Error:
+            return theme.current.colors["feedback-warning"];
+
+          case ToastType.Success:
+            return theme.current.colors["array-land-label"];
+
+          case ToastType.Warning:
+            return theme.current.colors["array-orange-label"];
+
+          default:
+            return theme.current.colors["core-text-primary"];
+        }
+    }, [ type, theme ]);
+    return jsx(AnimatePresence, {
+        onExitComplete: () => didHide(),
+        initial: !1,
+        children: ready && jsxs(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: [ jsx("div", {
+                role: "status",
+                "aria-live": "polite",
+                className: css.message,
+                children: content
+            }), ("Infinite" === duration || close) && jsx("div", {
+                className: css.close,
+                tabIndex: 0,
+                role: "button",
+                "aria-label": "dismiss message",
+                onKeyDown: e => accessibleKeyDown(e, handleClose),
+                onClick: handleClose,
+                children: jsx(Icon, {
+                    name: "x",
+                    size: 20,
+                    strokeColor: iconColor
+                })
+            }) ]
+        }))
+    });
+});
+
+ToastBase.displayName = "Toast";
+
+const Toast = React.memo(ToastBase);
+
+export { Toast as T, ToastType as a };