@apple-pie/slice 0.0.6 → 0.0.7

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

@@ -0,0 +1,204 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var Button = require("./Button-DFAWHJmQ.js"), _types = require("./_types-B5xXv4NA.js"), IconButton = require("./IconButton-B53y3z1_.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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(".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 = hooks_useTheme.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 = 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" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", input = React.useRef(null), [text, setText] = React.useState(value), [isFocused, setIsFocused] = React.useState(focused), [valid, setValid] = React.useState(isValid), [show, setShow] = React.useState(!1);
+    React.useEffect(() => {
+        input.current && (focused ? input.current.focus() : input.current.blur(), setIsFocused(focused));
+    }, [ focused ]), React.useEffect(() => {
+        setText(value);
+    }, [ value ]), React.useEffect(() => {
+        setValid(isValid);
+    }, [ isValid ]);
+    const textIsValid = React.useCallback(entry => {
+        if (!validate) return;
+        const ok = entry.length > 1 || "" === entry;
+        setValid(ok), valid !== ok && onValidate(ok);
+    }, [ onValidate, valid, validate ]), handleClearTextField = React.useCallback(() => {
+        (null == input ? void 0 : input.current) && (clearBlurs || input.current.focus(), 
+        setText(""), textIsValid("")), onChange(""), onClear();
+    }, [ clearBlurs, onChange, onClear, textIsValid ]), handleValueChange = React.useCallback(newValue => {
+        setText(newValue), onChange(newValue), valid || textIsValid(text);
+    }, [ onChange, textIsValid, text, valid ]), handleBlur = React.useCallback(() => {
+        textIsValid(text), setIsFocused(!1), onBlur(text);
+    }, [ text, onBlur, textIsValid ]), handleKeyDown = React.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 = React.useCallback(() => {
+        setIsFocused(!0), onFocus(text);
+    }, [ text, onFocus ]), toggleShow = React.useCallback(() => {
+        setShow(prev => !prev);
+    }, []), iconContainerStyle = React.useMemo(() => iconLeft ? {
+        width: iconLeft.size,
+        height: iconLeft.size
+    } : void 0, [ iconLeft ]), iconStrokeColor = React.useMemo(() => (null == iconLeft ? void 0 : iconLeft.color) ? iconLeft.color : theme.current.colors["core-icon-secondary"], [ iconLeft, theme ]), clearButtonStyle = React.useMemo(() => clearButton ? {
+        width: clearButton.size,
+        height: clearButton.size
+    } : void 0, [ clearButton ]), setStyleValue = React.useCallback(value => void 0 === value ? "unset" : "string" == typeof value ? value : `${value}px`, []), setBackgroundColor = React.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 = React.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 = React.useMemo(() => "none" === borderType ? "unset" : "underline" === borderType ? `0 1px 0 0 ${setBorderColor}` : `0 0 0 1px ${setBorderColor}`, [ borderType, setBorderColor ]), textColor = React.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 = React.useMemo(() => null != textAlign ? textAlign : "left", [ textAlign ]), setShowOpacity = React.useMemo(() => "password" !== inputType ? "0" : isFocused ? "1" : "0.5", [ inputType, isFocused ]), 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": 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 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: "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
+            }), jsxRuntime.jsx(react.AnimatePresence, {
+                initial: !1,
+                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: !1,
+                children: actionButton && jsxRuntime.jsx(react.motion.div, {
+                    variants: MOTION_CONFIG.variants,
+                    initial: "initial",
+                    animate: "animate",
+                    exit: "exit",
+                    transition: MOTION_CONFIG.transition,
+                    children: jsxRuntime.jsx(Button.Button, {
+                        label: "Translate",
+                        variant: "text",
+                        size: "text",
+                        state: "" === text ? "disabled" : "normal",
+                        labelColor: theme.current.colors["core-button-primary"],
+                        onClick: onAction
+                    })
+                })
+            }), "password" === inputType && !noShow && jsxRuntime.jsx("div", {
+                className: css.showPassword,
+                children: jsxRuntime.jsx(IconButton.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", exports.TextField = TextField;

package/dist/cjs/chunks/Tip-CjMHa-fD.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), utils = require("./utils-BsBHecUI.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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(".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 = tslib_es6.__rest(props, [ "tip", "size", "bgColor", "color", "border", "borderColor", "padding", "radius", "coords", "showDelay", "hideDelay" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [pos, setPos] = React.useState(tipBasePos), [ready, setReady] = React.useState(!1), [animate, setAnimate] = React.useState(!1), timer = React.useRef(null);
+    React.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 ]), React.useEffect(() => setAnimate(ready), [ ready ]);
+    const cssVars = React.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 = React.useMemo(() => {
+        const {left: left, top: top} = pos;
+        return {
+            left: `${null != left ? left : 0}px`,
+            top: `${null != top ? top : 0}px`
+        };
+    }, [ pos ]), classNames = React.useMemo(() => 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: .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);
+
+exports.Tip = Tip;

package/dist/cjs/chunks/Toast-Cdyh6T-l.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var ToastType, utils = require("./utils-BsBHecUI.js"), _types = require("./_types-B5xXv4NA.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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(".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"), 
+exports.ToastType = void 0, (ToastType = exports.ToastType || (exports.ToastType = {})).Success = "success", 
+ToastType.Error = "error", ToastType.Warning = "warning", ToastType.Info = "info";
+
+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 = exports.ToastType.Info, didHide: didHide = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "message", "size", "border", "padding", "radius", "showDelay", "duration", "position", "offset", "close", "type", "didHide" ]), theme = hooks_useTheme.useTheme(), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? `${className}` : "", [ready, setReady] = React.useState(!1), [content, setContent] = React.useState(null), timer = React.useRef(null);
+    React.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 ]), React.useEffect(() => setReady(null !== content), [ content ]);
+    const defaultPadding = React.useMemo(() => close ? "10px 12px 10px 16px" : "10px 16px", [ close ]), 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 ]), cssVars = React.useMemo(() => ({
+        "--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 ]), variants = React.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 = React.useMemo(() => utils.filterClasses([ css.wrapper, css[size], divClass ]), [ size, divClass ]), handleClose = React.useCallback(() => {
+        setReady(!1);
+    }, []), handleMouseOver = React.useCallback(() => {
+        timer.current && clearTimeout(timer.current);
+    }, []), handleMouseOut = React.useCallback(() => {
+        timer.current && clearTimeout(timer.current), "Infinite" !== duration && (timer.current = setTimeout(() => {
+            setContent(null);
+        }, duration));
+    }, [ duration ]), iconColor = React.useMemo(() => {
+        switch (type) {
+          case exports.ToastType.Error:
+            return theme.current.colors["feedback-warning"];
+
+          case exports.ToastType.Success:
+            return theme.current.colors["array-land-label"];
+
+          case exports.ToastType.Warning:
+            return theme.current.colors["array-orange-label"];
+
+          default:
+            return theme.current.colors["core-text-primary"];
+        }
+    }, [ type, theme ]);
+    return jsxRuntime.jsx(react.AnimatePresence, {
+        onExitComplete: () => didHide(),
+        initial: !1,
+        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
+            }), ("Infinite" === duration || 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: iconColor
+                })
+            }) ]
+        }))
+    });
+});
+
+ToastBase.displayName = "Toast";
+
+const Toast = React.memo(ToastBase);
+
+exports.Toast = Toast;

package/dist/cjs/chunks/UploadArea-BmZ50EEl.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var jsxRuntime = require("react/jsx-runtime"), React = require("react"), utils = require("./utils-BsBHecUI.js"), FileList = require("./FileList-J2EgJyCo.js"), _types = require("./_types-B5xXv4NA.js"), ProgressIndicator = require("./ProgressIndicator-BbrZ7Aoc.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+    wrapper: "UploadArea-module_wrapper__CRGxX flexBox-module_column__MP2Xd",
+    icon: "UploadArea-module_icon__BorsB flexBox-module_row__PWxbe",
+    title: "UploadArea-module_title__cHPKW type-module_body-l-bold__I8Q1v",
+    message: "UploadArea-module_message__cnoa7 flexBox-module_row__PWxbe",
+    files: "UploadArea-module_files__hIz4K flexBox-module_column__MP2Xd",
+    xs: "UploadArea-module_xs__MTB7z type-module_body-xs-regular__QWEzl",
+    s: "UploadArea-module_s__w0unZ type-module_body-s-regular__8-FO-",
+    m: "UploadArea-module_m__N4PzX type-module_body-m-regular__Qtp5G",
+    l: "UploadArea-module_l__2GkSv type-module_body-l-regular__Ar4d3"
+};
+
+styleInject_es.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.UploadArea-module_wrapper__CRGxX {\n\tpadding: var(--ua-padding) !important;\n\tborder: var(--ua-border) var(--ua-border-style) var(--ua-border-color);\n\tborder-radius: var(--ua-radius);\n\tbackground: var(--ua-bg-color);\n\tgap: 8px;\n\tcursor: var(--ua-cursor);\n\twidth: var(--ua-width);\n\theight: var(--ua-height);\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.UploadArea-module_icon__BorsB {\n\tmin-height: var(--ua-icon-size);\n\theight: var(--ua-icon-size);\n\tmin-width: var(--ua-icon-size);\n\twidth: var(--ua-icon-size);\n\tpointer-events: none;\n}\n\n.UploadArea-module_title__cHPKW {\n\tpointer-events: none;\n}\n\n.UploadArea-module_message__cnoa7 {\n\tcolor: var(--core-text-tertiary);\n\tpointer-events: none;\n\tgap: 8px;\n}\n\n.UploadArea-module_files__hIz4K {\n\tmargin-top: 16px !important;\n\twidth: 100%;\n}\n\n.UploadArea-module_xs__MTB7z {\n}\n\n.UploadArea-module_s__w0unZ {\n}\n\n.UploadArea-module_m__N4PzX {\n}\n\n.UploadArea-module_l__2GkSv {\n}\n");
+
+const imageTypes = [ "png", "jpg", "jpeg", "gif", "svg", "heic", "heif" ], videoTypes = [ "mp4", "avi", "mov", "wmv", "flv" ], documentTypes = [ "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" ], audioTypes = [ "mp3", "wav", "ogg", "aac", "flac" ], textTypes = [ "txt", "rtf", "md", "csv", "json", "xml" ], allTypes = [ ...imageTypes, ...videoTypes, ...documentTypes, ...audioTypes, ...textTypes ];
+
+var FileTypes;
+
+!function(FileTypes) {
+    FileTypes.images = "images", FileTypes.videos = "videos", FileTypes.documents = "documents", 
+    FileTypes.audio = "audio", FileTypes.text = "text", FileTypes.all = "all", FileTypes.custom = "custom";
+}(FileTypes || (FileTypes = {}));
+
+const UploadAreaBase = React.forwardRef((props, ref) => {
+    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", radius: radius = 8, padding: padding = 32, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = React.useState(!1), inputRef = React.useRef(null), dragDepth = React.useRef(0), handleClickUpload = React.useCallback(() => {
+        var _a;
+        busy || files.length > 0 || (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
+        null === (_a = inputRef.current) || void 0 === _a || _a.click());
+    }, [ busy, files.length ]), handleFileInputChange = React.useCallback(e => {
+        busy || e.target.files && (null == onUpload || onUpload(Array.from(e.target.files)));
+    }, [ busy, onUpload ]), hasFilesInDrag = React.useCallback(e => {
+        var _a, _b;
+        return Array.from(null !== (_b = null === (_a = e.dataTransfer) || void 0 === _a ? void 0 : _a.types) && void 0 !== _b ? _b : []).includes("Files");
+    }, []), handleDragEnter = React.useCallback(e => {
+        e.preventDefault(), !busy && hasFilesInDrag(e) && (dragDepth.current += 1, 1 === dragDepth.current && setHovered(!0));
+    }, [ busy, hasFilesInDrag ]), handleDragLeave = React.useCallback(e => {
+        e.preventDefault(), busy || (dragDepth.current = Math.max(0, dragDepth.current - 1), 
+        0 === dragDepth.current && setHovered(!1));
+    }, [ busy ]), handleDrop = React.useCallback(e => {
+        var _a;
+        if (e.preventDefault(), busy) return;
+        dragDepth.current = 0, setHovered(!1);
+        const files = Array.from(null !== (_a = e.dataTransfer.files) && void 0 !== _a ? _a : []);
+        null == onUpload || onUpload(files);
+    }, [ busy, onUpload ]), iconStrokeColor = React.useMemo(() => hovered ? iconColorHover : iconColor, [ hovered, iconColor, iconColorHover ]), cssVars = React.useMemo(() => ({
+        "--ua-border": `${border}px`,
+        "--ua-border-style": borderStyle,
+        "--ua-border-color": hovered || busy ? borderColorHover : borderColor,
+        "--ua-radius": `${radius}px`,
+        "--ua-padding": utils.setStyle(padding),
+        "--ua-bg-color": hovered ? bgColorHover : bgColor,
+        "--ua-icon-size": `${iconSize}px`,
+        "--ua-cursor": busy || files.length > 0 ? "default" : "pointer",
+        "--ua-width": utils.setStyle(width),
+        "--ua-height": utils.setStyle(height)
+    }), [ border, borderStyle, borderColor, borderColorHover, radius, padding, bgColor, bgColorHover, iconSize, busy, hovered, height, files.length, width ]);
+    return jsxRuntime.jsxs("div", {
+        className: css.wrapper,
+        style: cssVars,
+        ref: ref,
+        role: "button",
+        "aria-label": "Click to upload files",
+        tabIndex: 0,
+        onClick: handleClickUpload,
+        onKeyDown: e => utils.accessibleKeyDown(e, () => handleClickUpload()),
+        onDragEnter: handleDragEnter,
+        onDragOver: e => {
+            e.preventDefault();
+        },
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [ jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                size: iconSize,
+                name: icon,
+                strokeColor: iconStrokeColor,
+                pointer: !1
+            })
+        }), jsxRuntime.jsx("div", {
+            className: css.title,
+            children: title
+        }), jsxRuntime.jsxs("div", {
+            className: `${css.message} ${css[textSize]}`,
+            children: [ busy && showProgress && jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                show: !0,
+                size: 20,
+                inline: !0,
+                color: iconStrokeColor
+            }), busy ? busyMessage : message ]
+        }), files.length > 0 && jsxRuntime.jsx("div", {
+            className: css.files,
+            children: jsxRuntime.jsx(FileList.FileList, {
+                files: files,
+                bgColor: "var(--core-surface-primary)",
+                size: "m",
+                direction: "column",
+                gap: 8,
+                iconSize: 24,
+                padding: "10px",
+                canRemove: canRemove
+            })
+        }), jsxRuntime.jsx("input", {
+            ref: inputRef,
+            type: "file",
+            hidden: !0,
+            disabled: busy,
+            multiple: multiple,
+            accept: acceptedTypes ? acceptedTypes.join(", ") : void 0,
+            onChange: handleFileInputChange
+        }) ]
+    });
+});
+
+UploadAreaBase.displayName = "UploadArea";
+
+const UploadArea = React.memo(UploadAreaBase);
+
+exports.UploadArea = UploadArea, exports.allTypes = allTypes, exports.audioTypes = audioTypes, 
+exports.documentTypes = documentTypes, exports.imageTypes = imageTypes, exports.textTypes = textTypes, 
+exports.videoTypes = videoTypes;