foxit-component 1.0.4 → 1.0.5-alpha.2

package/es/Alert/Alert.d.ts

@@ -6,8 +6,9 @@ import './alert.css';
 interface AlertProps {
     message: string | React.ReactNode;
     showIcon?: boolean;
-    type?: 'success' | 'warning' | 'error' | 'gradient';
+    type?: 'success' | 'warning' | 'error' | 'gradient' | 'arrows';
     className?: string;
+    arrowPosition?: 'left' | 'right';
 }
 declare const Alert: React.FC<AlertProps>;
 export { Alert };

package/es/Alert/Alert.js

@@ -4,7 +4,8 @@ import { Icon } from '../Icon/index.js';
 import classNames from 'classnames';
 
 var Alert = function (_a) {
-    var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c, className = _a.className;
+    var _b;
+    var message = _a.message, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.type, type = _d === void 0 ? 'success' : _d, className = _a.className, _e = _a.arrowPosition, arrowPosition = _e === void 0 ? 'left' : _e;
     var getIconName = function (type) {
         switch (type) {
             case 'success':
@@ -19,7 +20,9 @@ var Alert = function (_a) {
                 return 'WarningColoursOutlined';
         }
     };
-    return (jsxs("div", __assign({ className: classNames('foxit-alert', "foxit-alert-".concat(type), className) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
+    return (jsxs("div", __assign({ className: classNames('foxit-alert', "foxit-alert-".concat(type), (_b = {},
+            _b["foxit-alert-arrows-".concat(arrowPosition)] = type === 'arrows',
+            _b), className) }, { children: [showIcon && type !== 'arrows' && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
 };
 
 export { Alert };

package/es/Checkbox/Checkbox.d.ts

@@ -5,7 +5,9 @@ interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     value?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    size?: 'default' | 'small';
+    indeterminate?: boolean;
 }
 interface CheckboxGroupProps {
     value?: string[];

package/es/Checkbox/Checkbox.js

@@ -1,17 +1,23 @@
 import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
 
 var CheckboxGroupContext = createContext(null);
 var Checkbox = function (_a) {
-    var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children;
+    var onChange = _a.onChange, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, children = _a.children, _c = _a.size, size = _c === void 0 ? 'default' : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d;
     var groupContext = useContext(CheckboxGroupContext);
-    var _c = useState(checked || false), internalChecked = _c[0], setInternalChecked = _c[1];
+    var _e = useState(checked || false), internalChecked = _e[0], setInternalChecked = _e[1];
+    var inputRef = useRef(null);
     useEffect(function () {
         if (checked !== undefined) {
             setInternalChecked(checked);
         }
     }, [checked]);
+    useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
     var handleChange = function (e) {
         var newChecked = e.target.checked;
         setInternalChecked(newChecked);
@@ -23,7 +29,7 @@ var Checkbox = function (_a) {
         }
     };
     var isChecked = groupContext ? groupContext.value.includes(value || '') : internalChecked;
-    return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '') }, { children: [jsx("input", { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
+    return (jsxs("label", __assign({ className: "foxit-checkbox-container ".concat(disabled ? 'disabled' : '', " ").concat(size === 'small' ? 'small' : '') }, { children: [jsx("input", { ref: inputRef, type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-checkbox-checkmark ".concat(disabled ? 'disabled' : '') }), jsx("span", __assign({ className: "foxit-checkbox-content" }, { children: children }))] })));
 };
 var CheckboxGroup = function (_a) {
     var value = _a.value, onChange = _a.onChange, children = _a.children;

package/es/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ConfigProviderProps {
+    dir?: 'ltr' | 'rtl';
+    children?: React.ReactNode;
+}
+interface ConfigContextType {
+    dir: 'ltr' | 'rtl';
+}
+export declare const useConfig: () => ConfigContextType;
+declare const ConfigProvider: React.FC<ConfigProviderProps>;
+export { ConfigProvider };

package/es/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,19 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+var ConfigContext = createContext({
+    dir: 'ltr'
+});
+var useConfig = function () {
+    return useContext(ConfigContext);
+};
+var ConfigProvider = function (_a) {
+    var _b = _a.dir, dir = _b === void 0 ? 'ltr' : _b, children = _a.children;
+    var value = {
+        dir: dir
+    };
+    return (jsx(ConfigContext.Provider, __assign({ value: value }, { children: jsx("div", __assign({ dir: dir }, { children: children })) })));
+};
+
+export { ConfigProvider, useConfig };

package/es/Input/Input.d.ts

@@ -11,5 +11,10 @@ interface SearchInputProps extends InputProps {
 }
 declare const SearchInput: React.FC<SearchInputProps>;
 declare const PasswordInput: React.FC<InputProps>;
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    rows?: number;
+}
+declare const TextArea: React.FC<TextAreaProps>;
 export default Input;
-export { SearchInput, PasswordInput };
+export { SearchInput, PasswordInput, TextArea };

package/es/Input/Input.js

@@ -25,5 +25,9 @@ var PasswordInput = function (props) {
     };
     return (jsx(Input, __assign({}, props, { type: visible ? 'text' : 'password', addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: toggleVisibility }, { children: jsx(Icon, { name: visible ? 'EyeOutlined' : 'EyeInvisibleOutlined' }) })) })));
 };
+var TextArea = function (_a) {
+    var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["className", "rows"]);
+    return (jsx("div", __assign({ className: "foxit-input-wrapper foxit-input-wrapper-textarea" }, { children: jsx("textarea", __assign({ className: classNames('foxit-input-element foxit-textarea-element', rest.disabled && 'foxit-input-wrapper-disabled', className), rows: rows }, rest)) })));
+};
 
-export { PasswordInput, SearchInput, Input as default };
+export { PasswordInput, SearchInput, TextArea, Input as default };

package/es/Menu/Menu.js

@@ -2,6 +2,8 @@ import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { Icon } from '../Icon/index.js';
+import { getDirection } from '../utils.js';
+import classNames from 'classnames';
 
 var getItem = function (label, key, icon, children, type) {
     return {
@@ -19,7 +21,7 @@ var Menu = function (_a) {
     var _f = useState(defaultSelectedKeys), uncontrolledSelectedKeys = _f[0], setUncontrolledSelectedKeys = _f[1];
     var selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : uncontrolledSelectedKeys;
     var _g = useState(null), hoveredKey = _g[0], setHoveredKey = _g[1];
-    var _h = useState({ top: 0, left: 0 }), popupPosition = _h[0], setPopupPosition = _h[1];
+    var _h = useState({ top: 0, left: 0, right: 0 }), popupPosition = _h[0], setPopupPosition = _h[1];
     var menuItemRefs = useRef({});
     var popupRef = useRef(null);
     var handleMenuClick = function (e) {
@@ -34,7 +36,7 @@ var Menu = function (_a) {
     // 标准展开模式的菜单项渲染
     var renderMenuItem = function (item) {
         var isSelected = selectedKeys.includes(item.key.toString());
-        return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })) }), item.key));
+        return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon-mr8" }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })) }), item.key));
     };
     // 标准展开模式的子菜单渲染
     var renderSubMenu = function (item) {
@@ -46,7 +48,7 @@ var Menu = function (_a) {
                         else {
                             setOpenKeys(__spreadArray(__spreadArray([], openKeys, true), [item.key.toString()], false));
                         }
-                    } }, { children: [jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })), jsx("span", { children: jsx(Icon, { name: "DownOutlined", className: "foxit-menu-icon ".concat(isOpen ? '' : 'foxit-menu-rotated-icon') }) })] })), isOpen && item.children && (jsx("div", __assign({ className: "foxit-menu-submenu-items" }, { children: item.children.map(function (child) {
+                    } }, { children: [jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon-mr8" }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })), jsx("span", { children: jsx(Icon, { name: "DownOutlined", className: "foxit-menu-icon ".concat(isOpen ? '' : 'foxit-menu-rotated-icon') }) })] })), isOpen && item.children && (jsx("div", __assign({ className: "foxit-menu-submenu-items" }, { children: item.children.map(function (child) {
                         return child.children ? renderSubMenu(child) : renderMenuItem(child);
                     }) })))] }, item.key));
     };
@@ -66,10 +68,21 @@ var Menu = function (_a) {
         var itemRef = menuItemRefs.current[key];
         if (itemRef) {
             var rect = itemRef.getBoundingClientRect();
-            setPopupPosition({
-                top: rect.top,
-                left: rect.right + 5
-            });
+            var dir = getDirection(itemRef);
+            if (dir === 'rtl' && window !== undefined) {
+                setPopupPosition({
+                    top: rect.top,
+                    left: 0,
+                    right: (window === null || window === void 0 ? void 0 : window.innerWidth) - rect.left
+                });
+            }
+            else {
+                setPopupPosition({
+                    top: rect.top,
+                    left: rect.right + 5,
+                    right: 0
+                });
+            }
         }
     };
     // 处理鼠标离开事件
@@ -94,16 +107,27 @@ var Menu = function (_a) {
         if (!hoveredKey)
             return null;
         var item = findItemByKey(items, hoveredKey);
-        if (!(item === null || item === void 0 ? void 0 : item.children))
-            return null;
-        return (jsx("div", __assign({ ref: popupRef, className: "foxit-menu-popup", style: {
-                position: 'fixed',
-                top: "".concat(popupPosition.top, "px"),
-                left: "".concat(popupPosition.left, "px"),
-                zIndex: 1000
-            }, onMouseEnter: function () { return setHoveredKey(hoveredKey); }, onMouseLeave: function () { return setHoveredKey(null); } }, { children: jsxs("div", __assign({ className: "foxit-menu foxit-menu-popup-content" }, { children: [jsxs("div", __assign({ className: "foxit-menu-popup-title" }, { children: [jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })), item.children.map(function (child) {
+        // if (!item?.children) return null;
+        // 根据方向设置样式
+        var dir = getDirection();
+        var popupStyle = {
+            position: 'fixed',
+            top: "".concat(popupPosition.top, "px"),
+            zIndex: 1000
+        };
+        if (dir === 'rtl') {
+            // RTL在左侧显示
+            popupStyle.right = "".concat(popupPosition.right, "px");
+            popupStyle.left = 'auto';
+        }
+        else {
+            // LTR在右侧显示
+            popupStyle.left = "".concat(popupPosition.left, "px");
+            popupStyle.right = 'auto';
+        }
+        return (jsx("div", __assign({ ref: popupRef, className: "foxit-menu-popup", style: popupStyle, onMouseEnter: function () { return setHoveredKey(hoveredKey); }, onMouseLeave: function () { return setHoveredKey(null); } }, { children: jsxs("div", __assign({ className: "foxit-menu foxit-menu-popup-content" }, { children: [jsxs("div", __assign({ className: classNames("foxit-menu-popup-title", !(item === null || item === void 0 ? void 0 : item.children) && 'foxit-menu-popup-title-no-border') }, { children: [jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item === null || item === void 0 ? void 0 : item.icon })), jsx("span", { children: item === null || item === void 0 ? void 0 : item.label })] })), (item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 ? void 0 : item.children.map(function (child) {
                         return child.children ? renderPopupSubMenu(child) : renderPopupMenuItem(child);
-                    })] })) })));
+                    }))] })) })));
     };
     // 弹出菜单中的普通菜单项渲染
     var renderPopupMenuItem = function (item) {

package/es/Modal/Modal.d.ts

@@ -14,6 +14,7 @@ interface IModalProps {
     closable?: boolean;
     okButtonProps?: Record<string, unknown>;
     cancelButtonProps?: Record<string, unknown>;
+    footer?: React.ReactNode;
 }
 interface ModalComponent extends FC<IModalProps> {
     confirm: (props: IModalProps & {

package/es/Modal/Modal.js

@@ -8,7 +8,7 @@ import { Modal as Modal$1 } from './ModalTemp.js';
 import { Button } from '../Button/Button.js';
 
 var ModalContent = function (_a) {
-    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
+    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
     var _g = useState(false), cancelLoading = _g[0], setCancelLoading = _g[1];
     var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -54,15 +54,15 @@ var ModalContent = function (_a) {
     return (jsxs("div", __assign({ className: classNames('foxit-modal-content-container', type === 'success' ? 'foxit-modal-success' : ''), style: {
             maxWidth: "min(".concat(width, ", calc(100vw - 32px))"),
             width: width
-        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, cancelButtonProps, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, okButtonProps, { children: onOkText })))] }))] })));
+        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), footer && jsx("div", __assign({ className: "foxit-modal-footer" }, { children: footer })), !footer && (jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, cancelButtonProps, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, okButtonProps, { children: onOkText })))] })))] })));
 };
 var Modal = function (_a) {
-    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
-    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps }, { children: children })) })));
+    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
+    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: children })) })));
 };
 // 语法糖的调用方式
 Modal.confirm = function (_a) {
-    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps;
+    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable, okButtonProps = _a.okButtonProps, cancelButtonProps = _a.cancelButtonProps, footer = _a.footer;
     var modalRoot = document.createElement('div');
     document.body.appendChild(modalRoot);
     var root = createRoot(modalRoot);
@@ -104,7 +104,7 @@ Modal.confirm = function (_a) {
                 : function () {
                     onOk === null || onOk === void 0 ? void 0 : onOk();
                     handleClose();
-                }, onOkText: onOkText, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps }, { children: content })) })));
+                }, onOkText: onOkText, closable: closable, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, footer: footer }, { children: content })) })));
 };
 
 export { Modal };

package/es/Quantity/Quantity.js

@@ -26,6 +26,13 @@ var Quantity = function (_a) {
         setInternalValue(newValue);
     };
     var handleChange = function (e) {
+        var newValue = parseInt(e.target.value, 10) || 0;
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    var handleBlur = function (e) {
         var newValue = parseInt(e.target.value, 10) || 0;
         if (min !== undefined && newValue < min) {
             newValue = min;
@@ -38,9 +45,14 @@ var Quantity = function (_a) {
         }
         setInternalValue(newValue);
     };
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            handleBlur(e);
+        }
+    };
     return (jsxs("div", __assign({ className: classNames('foxit-quantity', className) }, { children: [jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleDecrement, disabled: min !== undefined && currentValue <= min }, { children: jsx("div", { children: "-" }) })), jsx("input", __assign({ 
                 // type="number"
-                value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number" }, props)), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
+                value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number", onBlur: handleBlur, onKeyDown: handleKeyDown }, props)), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
 };
 
 export { Quantity };

package/es/Select/Select.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import './select.css';
 export interface SelectProps {
     options: {
         value: string | number;
-        label: string;
+        label: string | React.ReactNode;
     }[];
     className?: string;
     defaultValue?: string | number | string[] | number[];

package/es/Select/Select.js

@@ -30,10 +30,7 @@ var Select = function (_a) {
         singleValue: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.singleValue) || {}))); },
         input: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.input) || {}))); }
     };
-    var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ style: {
-                    display: 'flex',
-                    paddingLeft: 8,
-                    marginRight: -4,
+    var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ className: "foxit-select-custom-control", style: {
                     color: props.hasValue ? '#525252' : '#B3B3B3'
                 } }, { children: preIcon }))), props.children] }))); };
     var CustomOptionComp = function (props) { return (jsxs(components.Option, __assign({}, props, { children: [props.children, props.isSelected && jsx(Icon, { name: "CheckCircleOutlined" })] }))); };
@@ -41,14 +38,18 @@ var Select = function (_a) {
     var mobileRegex = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i;
     var padRegex = /iPad|Tablet|PlayBook|Silk|Kindle|Nexus 7|Nexus 10|SM-T|GT-P|TouchPad|Pad|HONOR|HDN/i;
     var isMobile = mobileRegex.test(userAgent) || padRegex.test(userAgent);
-    return (jsx(ReactSelect, __assign({ menuPortalTarget: document.body, options: options, className: classNames('foxit-select-wrapper', className), placeholder: placeholder, styles: customStyles, defaultValue: isMulti
+    // 解决nextjs 服务端渲染document is not defined问题
+    var menuPortalTarget = typeof document !== 'undefined' ? document.body : null;
+    // console.log(menuPortalTarget);
+    return (jsx(ReactSelect, __assign({ menuPortalTarget: menuPortalTarget, options: options, className: classNames('foxit-select-wrapper', className), placeholder: placeholder, styles: customStyles, defaultValue: isMulti
             ? options.filter(function (option) {
                 return Array.isArray(defaultValue) &&
                     defaultValue.includes(option.value);
             })
             : options.find(function (option) { return option.value === defaultValue; }), isDisabled: isDisabled, isClearable: isClearable, isSearchable: isMobile ? false : isSearchable, isMulti: isMulti, components: { Control: CustomControl, Option: CustomOptionComp }, onChange: onChange, menuPosition: "fixed" }, rest, { value: isMulti && Array.isArray(value)
             ? value.map(function (v) { return options.find(function (option) { return option.value === v; }); })
-            : options.find(function (option) { return option.value === value; }) || value })));
+            : options.find(function (option) { return option.value === value; }) ||
+                value })));
 };
 
 export { Select as default };

package/es/Table/Table.d.ts

@@ -7,12 +7,21 @@ export interface Column<T> {
     align?: 'left' | 'center' | 'right';
     render?: (text: T[keyof T], record: T) => React.ReactNode;
 }
+export interface RowSelection<T> {
+    selectedRowKeys?: React.Key[];
+    onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+    getCheckboxProps?: (record: T) => {
+        disabled?: boolean;
+    };
+}
 interface TableProps<T> {
     columns: Column<T>[];
     data: T[];
     loading?: boolean;
     emptyText?: React.ReactNode;
     mobile?: boolean;
+    rowSelection?: RowSelection<T>;
+    rowKey?: keyof T | ((record: T) => React.Key);
 }
-declare const Table: <T>({ columns, data, loading, emptyText, mobile }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ columns, data, loading, emptyText, mobile, rowSelection, rowKey }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/es/Table/Table.js

@@ -2,9 +2,13 @@ import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Empty from '../Empty/Empty.js';
 import { Icon } from '../Icon/index.js';
+import { getDirection } from '../utils.js';
+import { useRowSelection } from './useRowSelection.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 
 var Table = function (_a) {
-    var columns = _a.columns, data = _a.data, loading = _a.loading, emptyText = _a.emptyText, _b = _a.mobile, mobile = _b === void 0 ? false : _b;
+    var columns = _a.columns, data = _a.data, loading = _a.loading, emptyText = _a.emptyText, _b = _a.mobile, mobile = _b === void 0 ? false : _b, rowSelection = _a.rowSelection, _c = _a.rowKey, rowKey = _c === void 0 ? 'id' : _c;
+    var _d = useRowSelection({ data: data, rowSelection: rowSelection, rowKey: rowKey }), isAllSelected = _d.isAllSelected, isIndeterminate = _d.isIndeterminate, getRowKey = _d.getRowKey, handleRowSelect = _d.handleRowSelect, handleSelectAll = _d.handleSelectAll, shouldShowCheckbox = _d.shouldShowCheckbox, setHoveredRow = _d.setHoveredRow, isRowSelected = _d.isRowSelected;
     if (!loading && data.length === 0) {
         return jsx(Empty, { description: emptyText || 'No Data' });
     }
@@ -15,15 +19,36 @@ var Table = function (_a) {
                                         ? JSON.stringify(record[column.dataIndex])
                                         : String(record[column.dataIndex]) }))] }), colIndex)); }) }), rowIndex)); })] })));
     }
-    return (jsxs("div", __assign({ className: "foxit-table" }, { children: [loading ? (jsx("div", __assign({ className: "foxit-table-loading" }, { children: jsx(Icon, { name: "LoadingOutlined", className: "foxit-table-icon-loading" }) }))) : null, jsxs("table", __assign({ className: "foxit-table-container" }, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (column, index) { return (jsx("th", __assign({ style: {
-                                    width: column.width ? "".concat(column.width, "px") : 'auto',
-                                    textAlign: column.align || 'left'
-                                } }, { children: column.title }), index)); }) }) }), jsx("tbody", { children: data.map(function (record, rowIndex) { return (jsx("tr", __assign({ className: rowIndex % 2 === 0 ? 'foxit-even-row' : 'foxit-odd-row' }, { children: columns.map(function (column, colIndex) { return (jsx("td", __assign({ style: { textAlign: column.align || 'left' } }, { children: column.render
-                                    ? column.render(record[column.dataIndex], record)
-                                    : typeof record[column.dataIndex] === 'object'
-                                        ? JSON.stringify(record[column.dataIndex]) // 将对象转换为字符串
-                                        : String(record[column.dataIndex]) // 确保它是一个字符串
-                             }), colIndex)); }) }), rowIndex)); }) })] }))] })));
+    var handleColumnAlign = function (align) {
+        return getDirection() === 'rtl'
+            ? align === 'left'
+                ? 'right'
+                : align === 'right'
+                    ? 'left'
+                    : align
+            : align;
+    };
+    return (jsxs("div", __assign({ className: "foxit-table" }, { children: [loading ? (jsx("div", __assign({ className: "foxit-table-loading" }, { children: jsx(Icon, { name: "LoadingOutlined", className: "foxit-table-icon-loading" }) }))) : null, jsxs("table", __assign({ className: "foxit-table-container" }, { children: [jsx("thead", { children: jsxs("tr", __assign({ onMouseEnter: function () { return rowSelection && setHoveredRow('header'); }, onMouseLeave: function () { return setHoveredRow(null); } }, { children: [rowSelection && (jsx("th", __assign({ className: "foxit-table-checkbox" }, { children: jsx("div", __assign({ style: {
+                                            opacity: shouldShowCheckbox('header') ? 1 : 0,
+                                            transition: 'opacity 0.2s'
+                                        } }, { children: jsx(Checkbox, { size: "small", checked: isAllSelected, indeterminate: isIndeterminate, onChange: function (checked) { return handleSelectAll(checked); } }) })) }))), columns.map(function (column, index) { return (jsx("th", __assign({ style: {
+                                        width: column.width ? "".concat(column.width, "px") : 'auto',
+                                        textAlign: handleColumnAlign(column.align || 'left')
+                                    } }, { children: column.title }), index)); })] })) }), jsx("tbody", { children: data.map(function (record, rowIndex) {
+                            var _a;
+                            var key = getRowKey(record, rowIndex);
+                            var isSelected = isRowSelected(record, rowIndex);
+                            var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
+                            return (jsxs("tr", __assign({ className: rowIndex % 2 === 0 ? 'foxit-even-row' : 'foxit-odd-row', onMouseEnter: function () { return rowSelection && setHoveredRow(rowIndex); }, onMouseLeave: function () { return setHoveredRow(null); } }, { children: [rowSelection && (jsx("td", __assign({ className: "foxit-table-checkbox" }, { children: jsx("div", __assign({ style: {
+                                                opacity: shouldShowCheckbox(rowIndex) ? 1 : 0,
+                                                transition: 'opacity 0.2s'
+                                            } }, { children: jsx(Checkbox, { size: "small", checked: isSelected, onChange: function (checked) { return handleRowSelect(record, rowIndex, checked); }, disabled: checkboxProps.disabled }) })) }))), columns.map(function (column, colIndex) { return (jsx("td", __assign({ style: { textAlign: handleColumnAlign(column.align || 'left') } }, { children: column.render
+                                            ? column.render(record[column.dataIndex], record)
+                                            : typeof record[column.dataIndex] === 'object'
+                                                ? JSON.stringify(record[column.dataIndex]) // 将对象转换为字符串
+                                                : String(record[column.dataIndex]) // 确保它是一个字符串
+                                     }), colIndex)); })] }), key));
+                        }) })] }))] })));
 };
 
 export { Table as default };

package/es/Table/useRowSelection.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { RowSelection } from './Table';
+interface UseRowSelectionOptions<T> {
+    data: T[];
+    rowSelection?: RowSelection<T>;
+    rowKey: keyof T | ((record: T) => React.Key);
+}
+interface UseRowSelectionReturn<T> {
+    selectedKeys: Set<React.Key>;
+    hoveredRow: number | 'header' | null;
+    hasSelection: boolean;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    getRowKey: (record: T, index: number) => React.Key;
+    handleRowSelect: (record: T, index: number, checked: boolean) => void;
+    handleSelectAll: (checked: boolean) => void;
+    shouldShowCheckbox: (rowIndex: number | 'header') => boolean;
+    setHoveredRow: (row: number | 'header' | null) => void;
+    isRowSelected: (record: T, index: number) => boolean;
+}
+export declare const useRowSelection: <T>({ data, rowSelection, rowKey }: UseRowSelectionOptions<T>) => UseRowSelectionReturn<T>;
+export {};

package/es/Table/useRowSelection.js

@@ -0,0 +1,116 @@
+import { useState, useEffect, useMemo } from 'react';
+
+var useRowSelection = function (_a) {
+    var data = _a.data, rowSelection = _a.rowSelection, rowKey = _a.rowKey;
+    var _b = useState(new Set((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [])), selectedKeys = _b[0], setSelectedKeys = _b[1];
+    var _c = useState(new Map()), selectedRowsMap = _c[0], setSelectedRowsMap = _c[1];
+    var _d = useState(null), hoveredRow = _d[0], setHoveredRow = _d[1];
+    var hasSelection = selectedKeys.size > 0;
+    useEffect(function () {
+        if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) {
+            var externalKeys_1 = new Set(rowSelection.selectedRowKeys);
+            var externalRowsMap = new Map(Array.from(selectedRowsMap.entries()).filter(function (_a) {
+                var key = _a[0];
+                return externalKeys_1.has(key);
+            }));
+            setSelectedKeys(externalKeys_1);
+            setSelectedRowsMap(externalRowsMap);
+        }
+    }, [JSON.stringify(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys)]);
+    // 获取行的唯一 key
+    var getRowKey = function (record, index) {
+        var _a;
+        if (typeof rowKey === 'function') {
+            return rowKey(record);
+        }
+        return (_a = record[rowKey]) !== null && _a !== void 0 ? _a : index;
+    };
+    // 处理单行选择
+    var handleRowSelect = function (record, index, checked) {
+        var key = getRowKey(record, index);
+        var newSelectedKeys = new Set(selectedKeys);
+        var newSelectedRowsMap = new Map(selectedRowsMap);
+        if (checked) {
+            newSelectedKeys.add(key);
+            newSelectedRowsMap.set(key, record);
+        }
+        else {
+            newSelectedKeys.delete(key);
+            newSelectedRowsMap.delete(key);
+        }
+        setSelectedKeys(newSelectedKeys);
+        setSelectedRowsMap(newSelectedRowsMap);
+        if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) {
+            var selectedRows = Array.from(newSelectedRowsMap.values());
+            rowSelection.onChange(Array.from(newSelectedKeys), selectedRows);
+        }
+    };
+    // 处理全选
+    var handleSelectAll = function (checked) {
+        var newSelectedKeys = new Set(selectedKeys);
+        var newSelectedRowsMap = new Map(selectedRowsMap);
+        if (checked) {
+            data.forEach(function (record, index) {
+                var _a;
+                var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
+                if (!checkboxProps.disabled) {
+                    var key = getRowKey(record, index);
+                    newSelectedKeys.add(key);
+                    newSelectedRowsMap.set(key, record);
+                }
+            });
+        }
+        else {
+            data.forEach(function (record, index) {
+                var key = getRowKey(record, index);
+                newSelectedKeys.delete(key);
+                newSelectedRowsMap.delete(key);
+            });
+        }
+        setSelectedKeys(newSelectedKeys);
+        setSelectedRowsMap(newSelectedRowsMap);
+        if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) {
+            var selectedRows = Array.from(newSelectedRowsMap.values());
+            rowSelection.onChange(Array.from(newSelectedKeys), selectedRows);
+        }
+    };
+    // 判断是否全选
+    var isAllSelected = useMemo(function () {
+        if (data.length === 0)
+            return false;
+        var selectableData = data.filter(function (record) {
+            var _a;
+            var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
+            return !checkboxProps.disabled;
+        });
+        return (selectableData.length > 0 &&
+            selectableData.every(function (record, index) { return selectedKeys.has(getRowKey(record, index)); }));
+    }, [data, selectedKeys, rowSelection]);
+    // 判断是否部分选中
+    var isIndeterminate = useMemo(function () {
+        return selectedKeys.size > 0 && !isAllSelected;
+    }, [selectedKeys.size, isAllSelected]);
+    // 判断复选框是否应该显示
+    var shouldShowCheckbox = function (rowIndex) {
+        return hasSelection || hoveredRow === rowIndex;
+    };
+    // 判断某行是否被选中
+    var isRowSelected = function (record, index) {
+        return selectedKeys.has(getRowKey(record, index));
+    };
+    return {
+        selectedKeys: selectedKeys,
+        hoveredRow: hoveredRow,
+        hasSelection: hasSelection,
+        isAllSelected: isAllSelected,
+        isIndeterminate: isIndeterminate,
+        getRowKey: getRowKey,
+        handleRowSelect: handleRowSelect,
+        handleSelectAll: handleSelectAll,
+        shouldShowCheckbox: shouldShowCheckbox,
+        setHoveredRow: setHoveredRow,
+        isRowSelected: isRowSelected
+    };
+};
+
+export { useRowSelection };

package/es/Tabs/Tabs.d.ts

@@ -11,6 +11,7 @@ interface ButtonTabsProps {
     onChange?: (key: string) => void;
     type?: 'button' | 'link';
     className?: string;
+    destroyOnHidden?: boolean;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/es/Tabs/Tabs.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 
 var ButtonTabs = function (_a) {
     var _b;
-    var activeKey = _a.activeKey, items = _a.items, onChange = _a.onChange, _c = _a.type, type = _c === void 0 ? 'button' : _c, className = _a.className;
-    var _d = useState(activeKey || ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.key)), internalActiveKey = _d[0], setInternalActiveKey = _d[1];
-    var _e = useState(false), showScrollButtons = _e[0], setShowScrollButtons = _e[1];
+    var activeKey = _a.activeKey, items = _a.items, onChange = _a.onChange, _c = _a.type, type = _c === void 0 ? 'button' : _c, className = _a.className, _d = _a.destroyOnHidden, destroyOnHidden = _d === void 0 ? true : _d;
+    var _e = useState(activeKey || ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.key)), internalActiveKey = _e[0], setInternalActiveKey = _e[1];
+    var _f = useState(false), showScrollButtons = _f[0], setShowScrollButtons = _f[1];
     var tabListRef = useRef(null);
     var handleTabChange = function (key) {
         if (onChange) {
@@ -37,7 +37,9 @@ var ButtonTabs = function (_a) {
         };
     }, [items]);
     var currentKey = activeKey || internalActiveKey;
-    return (jsxs("div", { children: [type === 'button' ? (jsx("div", __assign({ className: "foxit-tabs" }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-tab-item ".concat(currentKey === item.key ? 'active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) }))) : (jsx("div", __assign({ className: "foxit-linktabs" }, { children: jsxs("div", __assign({ className: "foxit-linktabs-inner" }, { children: [showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-left", onClick: function () { return handleScroll('left'); } }, { children: '<' }))), jsx("div", __assign({ ref: tabListRef, className: classNames('foxit-linktabs-list', className) }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-linktab-btn".concat(currentKey === item.key ? ' active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) })), showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-right", onClick: function () { return handleScroll('right'); } }, { children: '>' })))] })) }))), jsx("div", __assign({ className: "foxit-tab-content" }, { children: items.map(function (item) { return item.key === currentKey && jsx("div", { children: item.children }, item.key); }) }))] }));
+    return (jsxs("div", { children: [type === 'button' ? (jsx("div", __assign({ className: "foxit-tabs" }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-tab-item ".concat(currentKey === item.key ? 'active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) }))) : (jsx("div", __assign({ className: "foxit-linktabs" }, { children: jsxs("div", __assign({ className: "foxit-linktabs-inner" }, { children: [showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-left", onClick: function () { return handleScroll('left'); } }, { children: '<' }))), jsx("div", __assign({ ref: tabListRef, className: classNames('foxit-linktabs-list', className) }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-linktab-btn".concat(currentKey === item.key ? ' active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) })), showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-right", onClick: function () { return handleScroll('right'); } }, { children: '>' })))] })) }))), jsx("div", __assign({ className: "foxit-tab-content" }, { children: destroyOnHidden
+                    ? items.map(function (item) { return item.key === currentKey && jsx("div", { children: item.children }, item.key); })
+                    : items.map(function (item) { return (jsx("div", __assign({ style: { display: item.key === currentKey ? 'block' : 'none' } }, { children: item.children }), item.key)); }) }))] }));
 };
 
 export { ButtonTabs as default };

package/es/Tooltip/Tooltip.d.ts

@@ -1,10 +1,12 @@
 import React, { ReactNode } from 'react';
 import './tooltip.css';
+type PlacementType = 'top' | 'bottom' | 'left' | 'right';
 interface TooltipProps {
     title: string | ReactNode;
     children: ReactNode;
     whiteGround?: boolean;
     className?: string;
+    placement?: PlacementType;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;

package/es/Tooltip/Tooltip.js

@@ -3,40 +3,143 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+import { getDirection } from '../utils.js';
 
 var Tooltip = function (_a) {
-    var title = _a.title, children = _a.children, _b = _a.whiteGround, whiteGround = _b === void 0 ? false : _b, className = _a.className;
+    var title = _a.title, children = _a.children, _b = _a.whiteGround, whiteGround = _b === void 0 ? false : _b, className = _a.className, _c = _a.placement, placement = _c === void 0 ? 'top' : _c;
     var childRef = useRef(null);
     var tooltipRef = useRef(null);
-    var _c = useState({ visibility: 'hidden', position: 'absolute', top: '0', left: '0' }), tooltipStyle = _c[0], setTooltipStyle = _c[1];
+    var _d = useState({
+        visibility: 'hidden',
+        position: 'absolute',
+        top: '0',
+        left: '0'
+    }), tooltipStyle = _d[0], setTooltipStyle = _d[1];
+    var _e = useState({
+        visibility: 'hidden'
+    }), bridgeStyle = _e[0], setBridgeStyle = _e[1];
     var isVisibleRef = useRef(false);
-    var _d = useState('50%'), arrowLeft = _d[0], setArrowLeft = _d[1];
+    var _f = useState({}), arrowPosition = _f[0], setArrowPosition = _f[1];
+    var _g = useState(false), mounted = _g[0], setMounted = _g[1];
     var calculateTooltipPosition = function () {
         if (childRef.current && tooltipRef.current && isVisibleRef.current) {
-            var childRect = childRef.current.getBoundingClientRect();
-            var tooltipHeight = tooltipRef.current.offsetHeight;
-            var tooltipWidth = tooltipRef.current.offsetWidth;
-            var top_1 = window.scrollY + childRect.top - tooltipHeight - 4; // 计算绝对位置，考虑页面滚动
-            var left = window.scrollX + childRect.left + childRect.width / 2 - tooltipWidth / 2;
-            var padding = 8; // 屏幕边缘留点空隙
-            var maxLeft = window.scrollX + document.documentElement.clientWidth - tooltipWidth - padding;
-            var minLeft = window.scrollX + padding;
-            if (left < minLeft)
-                left = minLeft;
-            if (left > maxLeft)
-                left = maxLeft;
-            // 箭头的 left 计算
-            var childCenter = childRect.left + childRect.width / 2;
-            var arrowLeftPx = childCenter - left;
-            // 限制箭头不超出 tooltip 边界
-            arrowLeftPx = Math.max(12, Math.min(tooltipWidth - 12, arrowLeftPx));
-            setArrowLeft("".concat(arrowLeftPx, "px"));
+            var childRect_1 = childRef.current.getBoundingClientRect();
+            var tooltipHeight_1 = tooltipRef.current.offsetHeight;
+            var tooltipWidth_1 = tooltipRef.current.offsetWidth;
+            var padding_1 = 8; // 屏幕边缘留点空隙
+            var gap = 8; // tooltip 与 child 之间的间距
+            // 辅助函数：限制水平位置不超出屏幕
+            var clampLeft = function (left) {
+                var maxLeft = window.scrollX + document.documentElement.clientWidth - tooltipWidth_1 - padding_1;
+                var minLeft = window.scrollX + padding_1;
+                return Math.max(minLeft, Math.min(maxLeft, left));
+            };
+            // 辅助函数：限制垂直位置不超出屏幕
+            var clampTop = function (top) {
+                var maxTop = window.scrollY + document.documentElement.clientHeight - tooltipHeight_1 - padding_1;
+                var minTop = window.scrollY + padding_1;
+                return Math.max(minTop, Math.min(maxTop, top));
+            };
+            // 辅助函数：计算水平方向箭头位置
+            var calcHorizontalArrow = function (left, isTop) {
+                var _a;
+                var childCenterX = childRect_1.left + childRect_1.width / 2;
+                var arrowLeftPx = Math.max(12, Math.min(tooltipWidth_1 - 12, childCenterX - left));
+                return _a = {
+                        left: getDirection() === 'rtl' ? "calc(".concat(arrowLeftPx, "px - 10px)") : "".concat(arrowLeftPx, "px")
+                    },
+                    _a[isTop ? 'bottom' : 'top'] = '-5px',
+                    _a.transform = 'translateX(-50%)',
+                    _a;
+            };
+            // 辅助函数：计算垂直方向箭头位置
+            var calcVerticalArrow = function (top, isLeft) {
+                var _a;
+                var childCenterY = childRect_1.top + childRect_1.height / 2;
+                // 将绝对坐标 top 转换为视口坐标
+                var arrowTopPx = Math.max(12, Math.min(tooltipHeight_1 - 12, childCenterY - (top - window.scrollY)));
+                return _a = {
+                        top: "".concat(arrowTopPx, "px")
+                    },
+                    _a[isLeft ? 'right' : 'left'] = '-5px',
+                    _a.transform = 'translateY(-50%)',
+                    _a;
+            };
+            var top_1 = 0;
+            var left = 0;
+            var arrowStyle = {};
+            var bridgeTop = 0;
+            var bridgeLeft = 0;
+            var bridgeWidth = 0;
+            var bridgeHeight = 0;
+            switch (placement) {
+                case 'top': {
+                    top_1 = window.scrollY + childRect_1.top - tooltipHeight_1 - gap;
+                    left = clampLeft(window.scrollX + childRect_1.left + childRect_1.width / 2 - tooltipWidth_1 / 2);
+                    arrowStyle = calcHorizontalArrow(left, true);
+                    // 桥接区域：从 tooltip 底部到 child 顶部
+                    var bridgeLeftStart = Math.min(left, window.scrollX + childRect_1.left);
+                    var bridgeRightEnd = Math.max(left + tooltipWidth_1, window.scrollX + childRect_1.right);
+                    bridgeTop = top_1 + tooltipHeight_1;
+                    bridgeLeft = bridgeLeftStart;
+                    bridgeWidth = bridgeRightEnd - bridgeLeftStart;
+                    bridgeHeight = gap + 5;
+                    break;
+                }
+                case 'bottom': {
+                    top_1 = window.scrollY + childRect_1.bottom + gap;
+                    left = clampLeft(window.scrollX + childRect_1.left + childRect_1.width / 2 - tooltipWidth_1 / 2);
+                    arrowStyle = calcHorizontalArrow(left, false);
+                    // 桥接区域：从 child 底部到 tooltip 顶部
+                    var bridgeLeftStart = Math.min(left, window.scrollX + childRect_1.left);
+                    var bridgeRightEnd = Math.max(left + tooltipWidth_1, window.scrollX + childRect_1.right);
+                    bridgeTop = window.scrollY + childRect_1.bottom;
+                    bridgeLeft = bridgeLeftStart;
+                    bridgeWidth = bridgeRightEnd - bridgeLeftStart;
+                    bridgeHeight = gap + 5;
+                    break;
+                }
+                case 'left': {
+                    top_1 = clampTop(window.scrollY + childRect_1.top + childRect_1.height / 2 - tooltipHeight_1 / 2);
+                    left = window.scrollX + childRect_1.left - tooltipWidth_1 - gap;
+                    arrowStyle = calcVerticalArrow(top_1, true);
+                    // 桥接区域：从 tooltip 右侧到 child 左侧
+                    var bridgeTopStart = Math.min(top_1, window.scrollY + childRect_1.top);
+                    var bridgeBottomEnd = Math.max(top_1 + tooltipHeight_1, window.scrollY + childRect_1.bottom);
+                    bridgeTop = bridgeTopStart;
+                    bridgeLeft = left + tooltipWidth_1;
+                    bridgeWidth = gap + 5;
+                    bridgeHeight = bridgeBottomEnd - bridgeTopStart;
+                    break;
+                }
+                case 'right': {
+                    top_1 = clampTop(window.scrollY + childRect_1.top + childRect_1.height / 2 - tooltipHeight_1 / 2);
+                    left = window.scrollX + childRect_1.right + gap;
+                    arrowStyle = calcVerticalArrow(top_1, false);
+                    // 桥接区域：从 child 右侧到 tooltip 左侧
+                    var bridgeTopStart = Math.min(top_1, window.scrollY + childRect_1.top);
+                    var bridgeBottomEnd = Math.max(top_1 + tooltipHeight_1, window.scrollY + childRect_1.bottom);
+                    bridgeTop = bridgeTopStart;
+                    bridgeLeft = window.scrollX + childRect_1.right;
+                    bridgeWidth = gap + 5;
+                    bridgeHeight = bridgeBottomEnd - bridgeTopStart;
+                    break;
+                }
+            }
+            setArrowPosition(arrowStyle);
             setTooltipStyle({
                 position: 'absolute',
                 top: "".concat(top_1, "px"),
                 left: "".concat(left, "px"),
                 visibility: 'visible',
-                zIndex: 9999 // 确保层级足够高
+                zIndex: 9999
+            });
+            setBridgeStyle({
+                top: "".concat(bridgeTop, "px"),
+                left: "".concat(bridgeLeft, "px"),
+                width: "".concat(bridgeWidth, "px"),
+                height: "".concat(bridgeHeight, "px"),
+                visibility: 'visible'
             });
         }
     };
@@ -49,20 +152,24 @@ var Tooltip = function (_a) {
     var handleMouseLeave = function () {
         isVisibleRef.current = false;
         setTooltipStyle(function (prev) { return (__assign(__assign({}, prev), { visibility: 'hidden' })); });
+        setBridgeStyle(function (prev) { return (__assign(__assign({}, prev), { visibility: 'hidden' })); });
         window.removeEventListener('scroll', calculateTooltipPosition); // 移除滚动事件监听
         window.removeEventListener('resize', calculateTooltipPosition); // 移除窗口大小变化监听
     };
     useEffect(function () {
+        setMounted(true);
         return function () {
             // 清理事件监听器，防止内存泄漏
             window.removeEventListener('scroll', calculateTooltipPosition);
             window.removeEventListener('resize', calculateTooltipPosition);
         };
     }, []);
-    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-tooltip-container", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: childRef }, { children: children })), ReactDOM.createPortal(jsxs("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: classNames("foxit-tooltip-content", {
-                    'foxit-tooltip-white': whiteGround
-                }, className), style: tooltipStyle, ref: tooltipRef }, { children: [title, jsx("div", { className: "foxit-tooltip-arrow", style: { left: arrowLeft } })] })), document.body // 直接挂载到 body，避免层叠上下文限制
-            )] }));
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-tooltip-container", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: childRef }, { children: children })), mounted &&
+                title &&
+                ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: "foxit-tooltip-bridge", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: bridgeStyle }), jsxs("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: classNames('foxit-tooltip-content', "foxit-tooltip-placement-".concat(placement), {
+                                'foxit-tooltip-white': whiteGround
+                            }, className), style: tooltipStyle, ref: tooltipRef }, { children: [title, jsx("div", { className: classNames('foxit-tooltip-arrow', "foxit-tooltip-arrow-".concat(placement)), style: arrowPosition })] }))] }), document.body // 直接挂载到 body，避免层叠上下文限制
+                )] }));
 };
 
 export { Tooltip as default };

package/es/index.css

@@ -1 +1 @@
-.foxit-checkbox-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-checkbox-container input{cursor:pointer;opacity:0;position:absolute}.foxit-checkbox-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:4px;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-checkbox-content{line-height:20px}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark{background-color:#ff5f00;border:none}.foxit-checkbox-checkmark:after{content:"";display:none;position:absolute}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark:after{display:block}.foxit-checkbox-container .foxit-checkbox-checkmark:after{border:solid #fff;border-width:0 2px 2px 0;height:10px;left:7px;top:4px;transform:rotate(45deg);width:6px}.foxit-checkbox-container.disabled{color:#00000040;cursor:not-allowed;opacity:.6}.foxit-checkbox-checkmark.disabled{background-color:#f5f5f5;border:1px solid #d9d9d9}.foxit-empty{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px;text-align:center}.foxit-empty-image{margin-bottom:16px}.foxit-empty-description{color:#757575;font-size:14px}.foxit-form-item{margin-bottom:24px}.foxit-form-item label{color:#525252;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.foxit-form-item-embedlabel{background-color:#fff;display:inline-block!important;margin-left:4px;padding:0 4px;position:relative;top:18px;z-index:1}.foxit-form-required{color:#e22727}.foxit-form-error-text,.foxit-form-warning-text{font-size:12px;line-height:24px;min-height:24px}.foxit-form-error-text{color:#e22727}.foxit-form-warning-text{color:orange}.foxit-form-item>.foxit-form-error-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-error-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-error-component .foxit-radio-container,.foxit-form-item>.foxit-form-error-component .foxit-select-wrapper>:nth-child(3){border:1px solid #e22727!important}.foxit-form-item>.foxit-form-warning-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-warning-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-warning-component .foxit-radio-container,.foxit-form-item>.foxit-form-warning-component .foxit-select-wrapper>:nth-child(3){border-color:orange!important}.foxit-input-wrapper{align-items:center;border:1px solid #d9d9d9;border-radius:10px;display:flex;font-size:14px;font-weight:400;padding:11px 16px;transition:border-color .3s}.foxit-input-wrapper:focus-within{border-color:#ff5f00!important}.foxit-input-wrapper:hover{border-color:#757575}.foxit-input-element{border:none;color:#525252;flex:1;line-height:24px;outline:none!important}.foxit-input-element::placeholder{color:#b3b3b3}.foxit-input-addon{align-items:center;color:#b3b3b3;cursor:pointer;display:flex;padding:0 0 0 8px;transition:color .3s}.foxit-input-addon-before{padding:0 8px 0 0}.foxit-input-wrapper:focus-within .foxit-input-addon{color:#ff5f00!important}.foxit-input-wrapper:hover .foxit-input-addon{color:#757575}.foxit-input-wrapper :disabled,.foxit-input-wrapper-disabled{background-color:#f8f8f8}.foxit-input-wrapper-disabled:hover{border-color:#d9d9d9}.foxit-input-wrapper-disabled .foxit-input-element{color:#b3b3b3}.foxit-pagination-container{align-items:center;display:flex;justify-content:center}.foxit-pagination-button,.foxit-pagination-next,.foxit-pagination-prev{background-color:initial;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:16px;font-weight:500;height:48px;margin:0 4px;min-width:48px;padding:0 12px;transition:background-color .3s ease,color .3s ease}.foxit-pagination-next:hover,.foxit-pagination-prev:hover{color:#ff5f00}.foxit-pagination-button:hover{background-color:#ff5f001a}.foxit-pagination-button:disabled{background-color:#ff5f00;color:#fff;cursor:default}.foxit-pagination-mobile-container{display:flex;justify-content:center;margin:16px 0}.foxit-pagination-mobile-next,.foxit-pagination-mobile-prev{height:36px;margin:0 8px;min-width:40px}.foxit-pagination-mobile-info{font-size:16px;min-width:48px}.foxit-button,.foxit-pagination-mobile-info{align-items:center;display:flex;justify-content:center}.foxit-button{border:0;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.42px}.foxit-button-circle{aspect-ratio:1;border-radius:50%!important;padding:0!important;width:auto}.foxit-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.foxit-button:hover{opacity:.8}.foxit-button-primary{background-color:#ff5f00;color:#fff}.foxit-button-secondary{background-color:#fff;border:1px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;min-height:38px;padding:8px 24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-small.foxit-button-circle{height:38px;width:38px}.foxit-button-medium{border-radius:5px;min-height:44px;padding:11px 32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-medium.foxit-button-circle{height:44px;width:44px}.foxit-button-large{min-height:56px;padding:16px 32px}.foxit-button-large.foxit-button-circle{height:56px;width:56px}.foxit-button-prevent-click{pointer-events:none}.foxit-button-loading{animation:spin 1s linear infinite;margin-right:8px}.foxit-button-primary .foxit-button-loading{color:#fff}.foxit-button-secondary .foxit-button-loading{color:#ff5f00}.foxit-radio-container{cursor:pointer;display:inline-block;padding-left:25px;position:relative;-webkit-user-select:none;user-select:none}.foxit-radio-container input{cursor:pointer;opacity:0;position:absolute}.foxit-radio-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:50%;height:20px;left:0;position:absolute;top:0;width:20px}.foxit-radio-content{line-height:20px}.foxit-radio-container input:checked~.foxit-radio-checkmark{background-color:#fff;border:1px solid #ff5f00}.foxit-radio-checkmark:after{content:"";display:none;position:absolute}.foxit-radio-container input:checked~.foxit-radio-checkmark:after{display:block}.foxit-radio-container .foxit-radio-checkmark:after{background:#ff5f00;border-radius:50%;height:10px;left:4px;top:4px;width:10px}.foxit-radio-container.disabled{cursor:not-allowed;opacity:.6}.foxit-table{border:1px solid #ff5f00;border-radius:10px;color:#373737;min-height:200px;overflow:hidden;position:relative}.foxit-table-loading{align-items:center;background-color:#ffffffb3;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:5}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;min-width:100%;table-layout:fixed;width:auto}.foxit-table-container td,.foxit-table-container th{word-wrap:break-word;height:70px;min-height:70px;padding:24px;white-space:pre-wrap}.foxit-table-container th{background-color:#fff6f0;font-size:16px;font-weight:700}.foxit-table-container td{font-size:14px;font-weight:400}.foxit-table-container .foxit-even-row{background-color:#fff}.foxit-table-container .foxit-odd-row{background-color:#fff6f0}.foxit-table-mobile-list{display:flex;flex-direction:column;gap:16px}.foxit-table-mobile-card{background:#f8f8f8;border-radius:10px;display:flex;flex-direction:column;gap:12px;padding:32px}.foxit-table-mobile-row{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}.foxit-table-mobile-row:not(:last-child){border-bottom:1px solid #efefef;padding-bottom:12px}.foxit-table-mobile-label{font-size:16px;font-weight:700;margin-right:16px;max-width:50%}.foxit-table-mobile-label,.foxit-table-mobile-value{word-wrap:break-word;color:#373737;white-space:pre-wrap}.foxit-table-mobile-value{flex:1 1 0;font-size:14px;font-weight:400;text-align:right}.foxit-table-mobile-loading{align-items:center;background:#0000;display:flex;justify-content:center;padding:24px 0;width:100%}.foxit-tabs{display:flex;flex-wrap:wrap;gap:8px}.foxit-tab-item{background-color:#f1f3f4;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:14px;font-weight:600;padding:14px 20px;transition:background-color .3s,color .3s}.foxit-tab-item.active{background-color:#ff5f00;color:#fff}.foxit-tab-item:hover:not(.active){background-color:#e0e0e0}.foxit-tab-content{margin-top:16px}.foxit-linktabs{width:100%}.foxit-linktabs-inner{margin-left:auto;margin-right:auto;position:relative}.foxit-linktabs-scroll{background:#fff;border:none;padding:8px;position:absolute;top:6px;z-index:10}.foxit-linktabs-scroll:hover{color:#ff5f00;cursor:pointer}.foxit-linktabs-scroll-left{left:-24px}.foxit-linktabs-scroll-right{right:-24px}.foxit-linktabs-list{-ms-overflow-style:none;border-bottom:1px solid #f1f3f4;display:flex;overflow-x:auto;scrollbar-width:none;text-align:center;white-space:nowrap;width:100%}.foxit-linktabs-list::-webkit-scrollbar{display:none}.foxit-linktab-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;outline:none;padding:12px;transition:border-color .2s,color .2s}.foxit-linktab-btn.active{border-bottom:2px solid #ff5f00;color:#ff5f00}.foxit-tag{border-radius:5px;display:inline-block;font-size:12px;font-weight:600;min-height:24px;padding:4px 8px}.foxit-tag-active{background-color:#edfafa;color:#0f8b8d}.foxit-tag-canceled{background-color:#ffecec;color:#e22727}.foxit-tag-pending{background-color:#fbf4d0;color:#9b8827}.foxit-tag-offline{background-color:#edecff;color:#6462c6}.foxit-tag-trial{background-color:#e4f4fe;color:#2288ce}.foxit-tag-expired{background-color:#ececec;color:#757575}.foxit-tag-completed{background-color:#edfafa;color:#0f8b8d}.foxit-toast-container{left:50%;pointer-events:none;position:fixed;top:0;transform:translateX(-50%);transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:2000}.foxit-toast-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-toast-loading-overlay{background-color:#000;height:100vh;inset:0;opacity:.15;pointer-events:auto;position:fixed;z-index:10}.foxit-toast-item{align-items:center;background-color:#fff;border:none;border-radius:50px;color:#525252;display:flex;flex-direction:row;gap:8px;justify-content:center;margin-bottom:16px;margin-left:auto;margin-right:auto;padding:9px 12px;position:relative;top:102px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content;z-index:20}.foxit-toast-item-success{background-color:#ddfae8;color:#1f7f40}.foxit-toast-item-error{background-color:#fae5dd;color:#e22727}.foxit-toast-item-warning{background-color:#fff0e7;color:#525252}.foxit-toast-enter{opacity:0;transform:translateY(-100%)}.foxit-toast-enter-active{transition:all .5s ease-out}.foxit-toast-enter-active,.foxit-toast-exit{opacity:1;transform:translateY(0)}.foxit-toast-exit-active{opacity:0;transform:translateY(-100%);transition:all .5s ease-in}.foxit-tooltip-container{display:inline-block;position:relative;width:auto}.foxit-tooltip-content{background-color:#525252;border-radius:10px;color:#fff;max-width:100%;min-width:100px;padding:12px 16px;position:absolute;width:300px;z-index:1}.foxit-tooltip-white{background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;color:#525252}.foxit-tooltip-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #525252;bottom:-5px;height:0;position:absolute;transform:translateX(-50%);width:0}.foxit-tooltip-white .foxit-tooltip-arrow{border-top-color:#e0e0e0}.foxit-tooltip-white .foxit-tooltip-arrow:after{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #fff;content:"";left:-5px;position:absolute;top:-6px}.foxit-menu{border-radius:10px;font-size:14px;overflow:hidden}.foxit-menu-item-content{align-items:center;cursor:pointer;display:flex;padding:12px 16px}.foxit-menu-item{padding-left:0}.foxit-menu-item.selected{background-color:#fff6f0!important;border-radius:10px;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8;border-radius:10px}.foxit-menu-submenu-title{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px}.foxit-menu-submenu-title:hover{background-color:#f5f6f8;border-radius:10px}.foxit-menu-icon{transition:transform .3s ease-in-out}.foxit-menu-rotated-icon{transform:rotate(180deg)}.foxit-menu-item-label{font-weight:600}.foxit-menu-collapsed{transition:width .2s;width:50px!important}.foxit-menu-item-icon{align-items:center;display:inline-flex;margin-right:8px}.foxit-menu-item-icon-collapsed{font-size:16px;margin-right:0}.foxit-menu-collapsed .foxit-menu-item-content,.foxit-menu-collapsed .foxit-menu-submenu-title{align-items:center;display:flex;justify-content:center;padding:12px}.foxit-menu-collapsed-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foxit-menu-popup{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px #0000001f,0 1px 3px #00000014;min-width:200px;padding:5px 0}.foxit-menu-popup-content{width:100%}.foxit-menu-popup-title{align-items:center;border-bottom:1px solid #f0f0f0;color:#333;display:flex;font-weight:600;padding:8px 16px}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;max-height:70vh;min-width:320px}@media (max-width:600px){.foxit-modal-content-container{box-sizing:border-box;overflow-y:auto}}.foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;column-gap:8px;display:flex;justify-content:space-between;padding:36px 36px 0}.foxit-modal-children{box-sizing:border-box;max-height:60vh;overflow-y:auto;padding:0 36px}@media (max-width:600px){.foxit-modal-children{height:auto;max-height:100%;overflow-y:initial}}.foxit-modal-title{font-size:20px;font-weight:700}.foxit-modal-success-icon{display:flex;height:94px;margin-top:-50px;width:115px}.foxit-modal-close-button{align-items:center;cursor:pointer;display:flex;height:16px;justify-content:center;width:16px}.foxit-modal-close-button svg{stroke:#6b7280}.foxit-modal-close-button:hover svg{stroke:#ea580c}.foxit-modal-footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end;padding:0 36px 36px}@media (max-width:600px){.foxit-modal-footer{align-items:stretch;flex-direction:column;width:100%}}.foxit-modal-fixed-layout{align-items:center;display:flex;flex-direction:column;inset:0;padding:36px;position:fixed;z-index:99}.foxit-modal-justify-center{justify-content:center}.foxit-modal-justify-top{justify-content:flex-start;padding-top:96px}.foxit-modal-justify-bottom{justify-content:flex-end}.foxit-modal-overlay{cursor:pointer;height:100%;inset:0;position:fixed;width:100%;z-index:99}.foxit-modal-overlay-bg{background-color:#00000026;height:100%;inset:0;position:absolute;width:100%}.foxit-modal-content{align-items:center;display:flex;font-size:16px;font-weight:400;justify-content:center;max-height:100%;width:auto;z-index:99}.foxit-modal-opacity-0{opacity:0}.foxit-modal-opacity-100{opacity:1}.foxit-modal-scale-0{transform:scale(0)}.foxit-modal-scale-100{transform:scale(1)}.foxit-modal-transition{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.foxit-modal-hide-overflow{overflow-y:hidden}.foxit-switch{background-color:#ccc;border-radius:100px;cursor:pointer;display:inline-block;height:22px;line-height:22px;min-width:40px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;min-width:24px;width:24px}.foxit-switch.checked{background-color:#ff5f00}.foxit-switch-handle{background-color:#fff;border-radius:50%;height:18px;position:absolute;top:2px;transform:translateX(1px);transition:transform .3s;width:18px}.foxit-switch.small .foxit-switch-handle{height:12px;top:1px;width:12px}.foxit-switch.checked .foxit-switch-handle{transform:translateX(20px)}.foxit-switch.small.checked .foxit-switch-handle{transform:translateX(11px)}.foxit-spin{display:inline-block;pointer-events:none;position:relative;width:100%}.foxit-spin .foxit-spin-container{opacity:.5}.foxit-spin-spinning{animation:spin 1s linear infinite;color:#ff5f00;margin-right:8px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.foxit-spin-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.foxit-spin-small .foxit-spin-icon{font-size:16px}.foxit-spin-default .foxit-spin-icon{font-size:24px}.foxit-spin-large .foxit-spin-icon{font-size:32px}.foxit-alert{align-items:flex-start;border-radius:5px;display:flex;padding:12px}.foxit-alert-icon-container{height:20px;margin-right:8px;width:20px}.foxit-alert-icon{height:20px;width:20px}.foxit-alert-message{font-size:12px}.foxit-alert-success,.foxit-alert-warning{background-color:#f5fff2;border:1px solid #30dc6b}.foxit-alert-error{background-color:#fae5dd;border:1px solid #e22727}.foxit-alert-gradient{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3);border:1px solid #ff5f00;display:block}.foxit-quantity,.foxit-quantity-button{align-items:center;display:flex}.foxit-quantity-button{background-color:#ff5f00;border:none;border-radius:4px;color:#fff;cursor:pointer;height:16px;justify-content:center;margin-left:8px;margin-right:8px;width:16px}.foxit-quantity-button:disabled{background-color:#ffc2a0;cursor:not-allowed}.foxit-quantity-button>div{font-size:16px;margin-top:-3px}.foxit-quantity-number{border:1px solid #b3b3b3;border-radius:4px;color:#525252;flex:1;font-size:14px;height:24px;line-height:24px;outline:none!important;text-align:center;width:48px}.foxit-drawer-mask{background-color:#00000026;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .3s;z-index:99}.foxit-drawer-mask-open{opacity:1;pointer-events:auto}.foxit-drawer{background:#fff;box-shadow:-2px 0 8px #00000026;height:100vh;overflow:auto;position:fixed;right:0;top:0;transition:right .3s;z-index:100}.foxit-drawer-content{padding:24px}.foxit-steps{display:flex}.foxit-steps-horizontal{align-items:flex-start;flex-direction:row}.foxit-steps-vertical{flex-direction:column}.foxit-steps-item{display:flex;flex:1;position:relative}.foxit-steps-horizontal .foxit-steps-item{align-items:center;flex-direction:column;text-align:center}.foxit-steps-vertical .foxit-steps-item{align-items:flex-start;flex-direction:row;margin-bottom:16px}.foxit-steps-item-container{display:flex;position:relative;z-index:1}.foxit-steps-horizontal .foxit-steps-item-container{align-items:center;flex-direction:column}.foxit-steps-vertical .foxit-steps-item-container{align-items:flex-start;flex-direction:row}.foxit-steps-item-clickable .foxit-steps-item-container{cursor:pointer}.foxit-steps-item-clickable:hover .foxit-steps-item-title{color:FF5F00}.foxit-steps-item-icon{align-items:center;display:flex;justify-content:center;margin-bottom:8px;position:relative}.foxit-steps-vertical .foxit-steps-item-icon{margin-bottom:0;margin-right:16px;margin-top:4px}.foxit-steps-icon{align-items:center;border-radius:50%;display:flex;font-size:12px;height:16px;justify-content:center;transition:all .3s ease;width:16px}.foxit-steps-icon-wait{background-color:#fff;border:1px solid #cecece}.foxit-steps-icon-process{background-color:#ff5f00;border:1px solid #ff5f00}.foxit-steps-icon-finish{background-color:#fff;border:1px solid #ff5f00;color:#ff5f00}.foxit-steps-item-content{display:flex;flex-direction:column;min-width:0}.foxit-steps-horizontal .foxit-steps-item-content{align-items:center;text-align:center}.foxit-steps-vertical .foxit-steps-item-content{align-items:flex-start;text-align:left}.foxit-steps-item-title{color:#757575;font-size:14px;line-height:1.5;margin-bottom:4px;transition:color .3s ease}.foxit-steps-item-process .foxit-steps-item-title{color:#ff5f00;font-weight:700}.foxit-steps-item-description{color:#00000073;font-size:12px;line-height:1.5;max-width:120px}.foxit-steps-item-tail{height:1px;left:50%;position:absolute;top:8px;width:calc(100% - 16px);z-index:0}.foxit-steps-horizontal .foxit-steps-item-tail{transform:translateX(8px)}.foxit-steps-vertical .foxit-steps-item-tail{height:100%;left:8px;position:absolute;top:20px;transform:none;width:1px}.foxit-steps-item-tail-line{background-color:#d9d9d9;height:100%;transition:background-color .3s ease;width:100%}.foxit-steps-item-finish .foxit-steps-item-tail-line{background-color:#ff6b35}.foxit-steps-item-process .foxit-steps-item-tail-line{background-color:#d9d9d9}
+.foxit-checkbox-container{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;user-select:none}[dir=ltr] .foxit-checkbox-container{padding-left:25px}[dir=rtl] .foxit-checkbox-container{padding-right:25px}.foxit-checkbox-container.small{line-height:16px}[dir=ltr] .foxit-checkbox-container.small{padding-left:21px}[dir=rtl] .foxit-checkbox-container.small{padding-right:21px}.foxit-checkbox-container input{cursor:pointer;opacity:0;position:absolute}.foxit-checkbox-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:4px;height:20px;position:absolute;top:0;width:20px}[dir=ltr] .foxit-checkbox-checkmark{left:0}[dir=rtl] .foxit-checkbox-checkmark{right:0}.foxit-checkbox-container input:indeterminate~.foxit-checkbox-checkmark{background-color:#fff}.foxit-checkbox-container.small .foxit-checkbox-checkmark{height:16px;width:16px}.foxit-checkbox-content{line-height:20px}.foxit-checkbox-container.small .foxit-checkbox-content{display:inline-block;font-size:12px;line-height:16px}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark{background-color:#ff5f00;border:none}[dir=rtl] .foxit-checkbox-container input:checked~.foxit-checkbox-checkmark{transform:scaleX(-1)}.foxit-checkbox-checkmark:after{content:"";display:none;position:absolute}.foxit-checkbox-container input:checked~.foxit-checkbox-checkmark:after{display:block}.foxit-checkbox-container .foxit-checkbox-checkmark:after{border:solid #fff;height:10px;top:4px;width:6px}[dir=ltr] .foxit-checkbox-container .foxit-checkbox-checkmark:after{border-width:0 2px 2px 0;left:7px;transform:rotate(45deg)}[dir=rtl] .foxit-checkbox-container .foxit-checkbox-checkmark:after{border-width:0 0 2px 2px;right:7px;transform:rotate(-45deg)}.foxit-checkbox-container input:indeterminate~.foxit-checkbox-checkmark:after{background-color:#ff5f00;border:none;border-radius:2px;display:block;height:10px;top:50%;width:10px}[dir=ltr] .foxit-checkbox-container input:indeterminate~.foxit-checkbox-checkmark:after{left:50%;transform:translate(-50%,-50%)}[dir=rtl] .foxit-checkbox-container input:indeterminate~.foxit-checkbox-checkmark:after{right:50%;transform:translate(50%,-50%)}.foxit-checkbox-container.small .foxit-checkbox-checkmark:after{top:2px}[dir=ltr] .foxit-checkbox-container.small .foxit-checkbox-checkmark:after{left:5px}[dir=rtl] .foxit-checkbox-container.small .foxit-checkbox-checkmark:after{right:5px}.foxit-checkbox-container.small input:indeterminate~.foxit-checkbox-checkmark:after{height:8px;top:50%;width:8px}[dir=ltr] .foxit-checkbox-container.small input:indeterminate~.foxit-checkbox-checkmark:after{left:50%;transform:translate(-50%,-50%)}[dir=rtl] .foxit-checkbox-container.small input:indeterminate~.foxit-checkbox-checkmark:after{right:50%;transform:translate(50%,-50%)}.foxit-checkbox-container.disabled{color:#00000040;cursor:not-allowed;opacity:.6}.foxit-checkbox-checkmark.disabled{background-color:#f5f5f5;border:1px solid #d9d9d9}.foxit-empty{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px;text-align:center}.foxit-empty-image{margin-bottom:16px}.foxit-empty-description{color:#757575;font-size:14px}.foxit-form-item{margin-bottom:24px}.foxit-form-item label{color:#525252;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.foxit-form-item-embedlabel{background-color:#fff;display:inline-block!important;padding:0 4px;position:relative;top:18px;z-index:1}[dir=ltr] .foxit-form-item-embedlabel{margin-left:4px}[dir=rtl] .foxit-form-item-embedlabel{margin-right:4px}.foxit-form-required{color:#e22727}.foxit-form-error-text,.foxit-form-warning-text{font-size:12px;line-height:24px;min-height:24px}.foxit-form-error-text{color:#e22727}.foxit-form-warning-text{color:orange}.foxit-form-item>.foxit-form-error-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-error-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-error-component .foxit-radio-container,.foxit-form-item>.foxit-form-error-component .foxit-select-wrapper>:nth-child(3){border:1px solid #e22727!important}.foxit-form-item>.foxit-form-warning-component .foxit-checkbox-container,.foxit-form-item>.foxit-form-warning-component .foxit-input-wrapper,.foxit-form-item>.foxit-form-warning-component .foxit-radio-container,.foxit-form-item>.foxit-form-warning-component .foxit-select-wrapper>:nth-child(3){border-color:orange!important}.foxit-input-wrapper{align-items:center;border:1px solid #d9d9d9;border-radius:10px;display:flex;font-size:14px;font-weight:400;padding:11px 16px;transition:border-color .3s}.foxit-input-wrapper:focus-within{border-color:#ff5f00!important}.foxit-input-wrapper:hover{border-color:#757575}.foxit-input-element{border:none;color:#525252;flex:1;line-height:24px;outline:none!important}[dir=ltr] .foxit-input-element{text-align:left}[dir=rtl] .foxit-input-element{text-align:right}.foxit-input-element::placeholder{color:#b3b3b3}.foxit-input-addon{align-items:center;color:#b3b3b3;cursor:pointer;display:flex;transition:color .3s}[dir=ltr] .foxit-input-addon{padding:0 0 0 8px}[dir=ltr] .foxit-input-addon-before,[dir=rtl] .foxit-input-addon{padding:0 8px 0 0}[dir=rtl] .foxit-input-addon-before{padding:0 0 0 8px}.foxit-input-wrapper:focus-within .foxit-input-addon{color:#ff5f00!important}.foxit-input-wrapper:hover .foxit-input-addon{color:#757575}.foxit-input-wrapper :disabled,.foxit-input-wrapper-disabled{background-color:#f8f8f8}.foxit-input-wrapper-disabled:hover{border-color:#d9d9d9}.foxit-input-wrapper-disabled .foxit-input-element{color:#b3b3b3}[dir=ltr] .foxit-input-wrapper-textarea{padding-right:0}[dir=rtl] .foxit-input-wrapper-textarea{padding-left:0}.foxit-textarea-element{resize:none;scrollbar-color:#d9d9d9 #fff;scrollbar-gutter:stable;scrollbar-width:auto}.foxit-textarea-element::-webkit-scrollbar{width:16px}.foxit-textarea-element::-webkit-scrollbar-track{background:#fff}.foxit-textarea-element::-webkit-scrollbar-thumb{background-color:#d9d9d9;border:4px solid #fff;border-radius:8px}.foxit-pagination-container{align-items:center;display:flex;justify-content:center}.foxit-pagination-button,.foxit-pagination-next,.foxit-pagination-prev{background-color:initial;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:16px;font-weight:500;height:48px;margin:0 4px;min-width:48px;padding:0 12px;transition:background-color .3s ease,color .3s ease}.foxit-pagination-next:hover,.foxit-pagination-prev:hover{color:#ff5f00}.foxit-pagination-button:hover{background-color:#ff5f001a}.foxit-pagination-button:disabled{background-color:#ff5f00;color:#fff;cursor:default}.foxit-pagination-mobile-container{display:flex;justify-content:center;margin:16px 0}.foxit-pagination-mobile-next,.foxit-pagination-mobile-prev{height:36px;margin:0 8px;min-width:40px}.foxit-pagination-mobile-info{font-size:16px;min-width:48px}.foxit-button,.foxit-pagination-mobile-info{align-items:center;display:flex;justify-content:center}.foxit-button{border:0;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.42px}.foxit-button-circle{aspect-ratio:1;border-radius:50%!important;padding:0!important;width:auto}.foxit-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.foxit-button:hover{opacity:.8}.foxit-button-primary{background-color:#ff5f00;color:#fff}.foxit-button-secondary{background-color:#fff;border:1px solid #ff5f00;color:#ff5f00}.foxit-button-small{border-radius:5px;min-height:38px;padding:8px 24px}.foxit-button-small svg{height:16px;width:16px}.foxit-button-small.foxit-button-circle{height:38px;width:38px}.foxit-button-medium{border-radius:5px;min-height:44px;padding:11px 32px}.foxit-button-medium svg{height:20px;width:20px}.foxit-button-medium.foxit-button-circle{height:44px;width:44px}.foxit-button-large{min-height:56px;padding:16px 32px}.foxit-button-large.foxit-button-circle{height:56px;width:56px}.foxit-button-prevent-click{pointer-events:none}.foxit-button-loading{animation:spin 1s linear infinite}[dir=ltr] .foxit-button-loading{margin-right:8px}[dir=rtl] .foxit-button-loading{margin-left:8px}.foxit-button-primary .foxit-button-loading{color:#fff}.foxit-button-secondary .foxit-button-loading{color:#ff5f00}.foxit-radio-container{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;user-select:none}[dir=ltr] .foxit-radio-container{padding-left:25px}[dir=rtl] .foxit-radio-container{padding-right:25px}.foxit-radio-container input{cursor:pointer;opacity:0;position:absolute}.foxit-radio-checkmark{background-color:#fff;border:1px solid #b3b3b3;border-radius:50%;height:20px;position:absolute;top:0;width:20px}[dir=ltr] .foxit-radio-checkmark{left:0}[dir=rtl] .foxit-radio-checkmark{right:0}.foxit-radio-content{line-height:20px}.foxit-radio-container input:checked~.foxit-radio-checkmark{background-color:#fff;border:1px solid #ff5f00}.foxit-radio-checkmark:after{content:"";display:none;position:absolute}.foxit-radio-container input:checked~.foxit-radio-checkmark:after{display:block}.foxit-radio-container .foxit-radio-checkmark:after{background:#ff5f00;border-radius:50%;height:10px;top:4px;width:10px}[dir=ltr] .foxit-radio-container .foxit-radio-checkmark:after{left:4px}[dir=rtl] .foxit-radio-container .foxit-radio-checkmark:after{right:4px}.foxit-radio-container.disabled{cursor:not-allowed;opacity:.6}.foxit-select-custom-control{display:flex}[dir=ltr] .foxit-select-custom-control{margin-right:-4px;padding-left:8px}[dir=rtl] .foxit-select-custom-control{margin-left:-4px;padding-right:8px}.foxit-table{border:1px solid #ff5f00;border-radius:10px;color:#373737;min-height:200px;overflow:hidden;position:relative}.foxit-table-loading{align-items:center;background-color:#ffffffb3;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%;z-index:5}[dir=ltr] .foxit-table-loading{left:0}[dir=rtl] .foxit-table-loading{right:0}.foxit-table-icon-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-table-container{border-collapse:collapse;min-width:100%;table-layout:fixed;width:auto}.foxit-table-container td,.foxit-table-container th{word-wrap:break-word;height:70px;min-height:70px;padding:24px;white-space:pre-wrap}.foxit-table-container th{background-color:#fff6f0;font-size:16px;font-weight:700}.foxit-table-container td{font-size:14px;font-weight:400}.foxit-table-container .foxit-even-row{background-color:#fff}.foxit-table-container .foxit-odd-row{background-color:#fff6f0}.foxit-table-mobile-list{display:flex;flex-direction:column;gap:16px}.foxit-table-mobile-card{background:#f8f8f8;border-radius:10px;display:flex;flex-direction:column;gap:12px;padding:32px}.foxit-table-mobile-row{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}.foxit-table-mobile-row:not(:last-child){border-bottom:1px solid #efefef;padding-bottom:12px}.foxit-table-mobile-label{word-wrap:break-word;color:#373737;font-size:16px;font-weight:700;max-width:50%;white-space:pre-wrap}[dir=ltr] .foxit-table-mobile-label{margin-right:16px}[dir=rtl] .foxit-table-mobile-label{margin-left:16px}.foxit-table-mobile-value{word-wrap:break-word;color:#373737;flex:1 1 0;font-size:14px;font-weight:400;white-space:pre-wrap}[dir=ltr] .foxit-table-mobile-value{text-align:right}[dir=rtl] .foxit-table-mobile-value{text-align:left}.foxit-table-mobile-loading{align-items:center;background:#0000;display:flex;justify-content:center;padding:24px 0;width:100%}.foxit-table-checkbox{position:relative;text-align:center}[dir=ltr] .foxit-table-checkbox{padding:24px 0 24px 16px!important}[dir=rtl] .foxit-table-checkbox{padding:24px 16px 24px 0!important}.foxit-tabs{display:flex;flex-wrap:wrap;gap:8px}.foxit-tab-item{background-color:#f1f3f4;border:none;border-radius:10px;color:#757575;cursor:pointer;font-size:14px;font-weight:600;padding:14px 20px;transition:background-color .3s,color .3s}.foxit-tab-item.active{background-color:#ff5f00;color:#fff}.foxit-tab-item:hover:not(.active){background-color:#e0e0e0}.foxit-tab-content{margin-top:16px}.foxit-linktabs{width:100%}.foxit-linktabs-inner{margin-left:auto;margin-right:auto;position:relative}.foxit-linktabs-scroll{background:#fff;border:none;padding:8px;position:absolute;top:6px;z-index:10}.foxit-linktabs-scroll:hover{color:#ff5f00;cursor:pointer}[dir=ltr] .foxit-linktabs-scroll-left{left:-24px}[dir=ltr] .foxit-linktabs-scroll-right,[dir=rtl] .foxit-linktabs-scroll-left{right:-24px}[dir=rtl] .foxit-linktabs-scroll-right{left:-24px}.foxit-linktabs-list{-ms-overflow-style:none;border-bottom:1px solid #f1f3f4;display:flex;overflow-x:auto;scrollbar-width:none;text-align:center;white-space:nowrap;width:100%}.foxit-linktabs-list::-webkit-scrollbar{display:none}.foxit-linktab-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;outline:none;padding:12px;transition:border-color .2s,color .2s}.foxit-linktab-btn.active{border-bottom:2px solid #ff5f00;color:#ff5f00}.foxit-tag{border-radius:5px;display:inline-block;font-size:12px;font-weight:600;min-height:24px;padding:4px 8px}.foxit-tag-active{background-color:#edfafa;color:#0f8b8d}.foxit-tag-canceled{background-color:#ffecec;color:#e22727}.foxit-tag-pending{background-color:#fbf4d0;color:#9b8827}.foxit-tag-offline{background-color:#edecff;color:#6462c6}.foxit-tag-trial{background-color:#e4f4fe;color:#2288ce}.foxit-tag-expired{background-color:#ececec;color:#757575}.foxit-tag-completed{background-color:#edfafa;color:#0f8b8d}.foxit-toast-container{pointer-events:none;position:fixed;top:0;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:2000}[dir=ltr] .foxit-toast-container{left:50%;transform:translateX(-50%)}[dir=rtl] .foxit-toast-container{right:50%;transform:translateX(50%)}.foxit-toast-loading{animation:spin 1s linear infinite;color:#ff5f00}.foxit-toast-loading-overlay{background-color:#000;height:100vh;inset:0;opacity:.15;pointer-events:auto;position:fixed;z-index:10}.foxit-toast-item{align-items:center;background-color:#fff;border:none;border-radius:50px;color:#525252;display:flex;flex-direction:row;gap:8px;justify-content:center;margin-bottom:16px;margin-left:auto;margin-right:auto;padding:9px 12px;position:relative;top:102px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content;z-index:20}.foxit-toast-item-success{background-color:#ddfae8;color:#1f7f40}.foxit-toast-item-error{background-color:#fae5dd;color:#e22727}.foxit-toast-item-warning{background-color:#fff0e7;color:#525252}.foxit-toast-enter{opacity:0;transform:translateY(-100%)}.foxit-toast-enter-active{transition:all .5s ease-out}.foxit-toast-enter-active,.foxit-toast-exit{opacity:1;transform:translateY(0)}.foxit-toast-exit-active{opacity:0;transform:translateY(-100%);transition:all .5s ease-in}.foxit-tooltip-container{display:inline-block;position:relative;width:auto}.foxit-tooltip-content{background-color:#525252;border-radius:10px;color:#fff;max-width:100%;min-width:100px;padding:12px 16px;position:absolute;width:300px;z-index:1}.foxit-tooltip-white{background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;color:#525252}.foxit-tooltip-bridge{background-color:initial;pointer-events:auto;position:absolute;z-index:9998}.foxit-tooltip-arrow{height:0;position:absolute;width:0}.foxit-tooltip-arrow-top{border-top:5px solid #525252}.foxit-tooltip-arrow-bottom,.foxit-tooltip-arrow-top{border-left:5px solid #0000;border-right:5px solid #0000}.foxit-tooltip-arrow-bottom{border-bottom:5px solid #525252}.foxit-tooltip-arrow-left{border-bottom:5px solid #0000;border-top:5px solid #0000}[dir=ltr] .foxit-tooltip-arrow-left{border-left:5px solid #525252}[dir=rtl] .foxit-tooltip-arrow-left{border-right:5px solid #525252}.foxit-tooltip-arrow-right{border-bottom:5px solid #0000;border-top:5px solid #0000}[dir=ltr] .foxit-tooltip-arrow-right{border-right:5px solid #525252}[dir=rtl] .foxit-tooltip-arrow-right{border-left:5px solid #525252}.foxit-tooltip-white .foxit-tooltip-arrow-top{border-top-color:#e0e0e0}.foxit-tooltip-white .foxit-tooltip-arrow-bottom{border-bottom-color:#e0e0e0}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-left{border-left-color:#e0e0e0}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-right,[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-left{border-right-color:#e0e0e0}[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-right{border-left-color:#e0e0e0}.foxit-tooltip-white .foxit-tooltip-arrow-top:after{border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid #fff;content:"";position:absolute;top:-6px}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-top:after{left:-5px}[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-top:after{right:-5px}.foxit-tooltip-white .foxit-tooltip-arrow-bottom:after{border-bottom:5px solid #fff;border-left:5px solid #0000;border-right:5px solid #0000;bottom:-6px;content:"";position:absolute}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-bottom:after{left:-5px}[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-bottom:after{right:-5px}.foxit-tooltip-white .foxit-tooltip-arrow-left:after{border-bottom:5px solid #0000;border-top:5px solid #0000;content:"";position:absolute;top:-5px}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-left:after{border-left:5px solid #fff;left:-6px}[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-left:after{border-right:5px solid #fff;right:-6px}.foxit-tooltip-white .foxit-tooltip-arrow-right:after{border-bottom:5px solid #0000;border-top:5px solid #0000;content:"";position:absolute;top:-5px}[dir=ltr] .foxit-tooltip-white .foxit-tooltip-arrow-right:after{border-right:5px solid #fff;right:-6px}[dir=rtl] .foxit-tooltip-white .foxit-tooltip-arrow-right:after{border-left:5px solid #fff;left:-6px}.foxit-menu{border-radius:10px;font-size:14px;overflow:hidden}.foxit-menu-item-content{align-items:center;cursor:pointer;display:flex;padding:12px 16px}[dir=ltr] .foxit-menu-item{padding-left:0}[dir=rtl] .foxit-menu-item{padding-right:0}.foxit-menu-item.selected{background-color:#fff6f0!important;border-radius:10px;color:#ff5f00;font-weight:600}.foxit-menu-item:hover{background-color:#f5f6f8;border-radius:10px}.foxit-menu-submenu-title{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px}.foxit-menu-submenu-title:hover{background-color:#f5f6f8;border-radius:10px}.foxit-menu-icon{transition:transform .3s ease-in-out}[dir=ltr] .foxit-menu-rotated-icon{transform:rotate(180deg)}[dir=rtl] .foxit-menu-rotated-icon{transform:rotate(-180deg)}.foxit-menu-item-label{font-weight:600}.foxit-menu-collapsed{transition:width .2s;width:50px!important}.foxit-menu-item-icon{align-items:center;display:inline-flex}[dir=ltr] .foxit-menu-item-icon{margin-right:8px}[dir=rtl] .foxit-menu-item-icon{margin-left:8px}.foxit-menu-item-icon-collapsed{font-size:16px}[dir=ltr] .foxit-menu-item-icon-collapsed{margin-right:0}[dir=rtl] .foxit-menu-item-icon-collapsed{margin-left:0}.foxit-menu-collapsed .foxit-menu-item-content,.foxit-menu-collapsed .foxit-menu-submenu-title{align-items:center;display:flex;justify-content:center;padding:12px}[dir=ltr] .foxit-menu-item-icon-mr8{margin-right:8px}[dir=rtl] .foxit-menu-item-icon-mr8{margin-left:8px}.foxit-menu-collapsed-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.foxit-menu-popup{background-color:#fff;border-radius:10px;box-shadow:0 3px 6px #0000001f,0 1px 3px #00000014;min-width:200px;padding:5px 0}.foxit-menu-popup-content{width:100%}.foxit-menu-popup-title{align-items:center;border-bottom:1px solid #f0f0f0;color:#333;display:flex;font-weight:600;padding:8px 16px}.foxit-menu-popup-title-no-border{border-bottom:none}.foxit-modal-content-container{background-color:#fff;border-radius:10px;display:flex;flex-direction:column;gap:24px;justify-content:space-between;max-height:70vh;min-width:320px}@media (max-width:600px){.foxit-modal-content-container{box-sizing:border-box;overflow-y:auto}}[dir=ltr] .foxit-modal-success{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}[dir=rtl] .foxit-modal-success{background:linear-gradient(-135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-modal-head{align-items:center;column-gap:8px;display:flex;justify-content:space-between;padding:36px 36px 0}.foxit-modal-children{box-sizing:border-box;max-height:60vh;overflow-y:auto;padding:0 36px}@media (max-width:600px){.foxit-modal-children{height:auto;max-height:100%;overflow-y:initial}}.foxit-modal-title{font-size:20px;font-weight:700}.foxit-modal-success-icon{display:flex;height:94px;margin-top:-50px;width:115px}.foxit-modal-close-button{align-items:center;cursor:pointer;display:flex;height:16px;justify-content:center;width:16px}.foxit-modal-close-button svg{stroke:#6b7280}.foxit-modal-close-button:hover svg{stroke:#ea580c}.foxit-modal-footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end;padding:0 36px 36px}@media (max-width:600px){.foxit-modal-footer{align-items:stretch;flex-direction:column;width:100%}}.foxit-modal-fixed-layout{align-items:center;display:flex;flex-direction:column;inset:0;padding:36px;position:fixed;z-index:99}.foxit-modal-justify-center{justify-content:center}.foxit-modal-justify-top{justify-content:flex-start;padding-top:96px}.foxit-modal-justify-bottom{justify-content:flex-end}.foxit-modal-overlay{cursor:pointer;height:100%;inset:0;position:fixed;width:100%;z-index:99}.foxit-modal-overlay-bg{background-color:#00000026;height:100%;inset:0;position:absolute;width:100%}.foxit-modal-content{align-items:center;display:flex;font-size:16px;font-weight:400;justify-content:center;max-height:100%;width:auto;z-index:99}.foxit-modal-opacity-0{opacity:0}.foxit-modal-opacity-100{opacity:1}.foxit-modal-scale-0{transform:scale(0)}.foxit-modal-scale-100{transform:scale(1)}.foxit-modal-transition{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.foxit-modal-hide-overflow{overflow-y:hidden}.foxit-switch{background-color:#ccc;border-radius:100px;cursor:pointer;display:inline-block;height:22px;line-height:22px;min-width:40px;position:relative;transition:background-color .3s;width:40px}.foxit-switch.small{height:14px;line-height:14px;min-width:24px;width:24px}.foxit-switch.checked{background-color:#ff5f00}.foxit-switch-handle{background-color:#fff;border-radius:50%;height:18px;position:absolute;top:2px;transition:transform .3s;width:18px}[dir=ltr] .foxit-switch-handle{transform:translateX(1px)}[dir=rtl] .foxit-switch-handle{transform:translateX(-1px)}.foxit-switch.small .foxit-switch-handle{height:12px;top:1px;width:12px}[dir=ltr] .foxit-switch.checked .foxit-switch-handle{transform:translateX(20px)}[dir=rtl] .foxit-switch.checked .foxit-switch-handle{transform:translateX(-20px)}[dir=ltr] .foxit-switch.small.checked .foxit-switch-handle{transform:translateX(11px)}[dir=rtl] .foxit-switch.small.checked .foxit-switch-handle{transform:translateX(-11px)}.foxit-spin{display:inline-block;pointer-events:none;position:relative;width:100%}.foxit-spin .foxit-spin-container{opacity:.5}.foxit-spin-spinning{animation:spin 1s linear infinite;color:#ff5f00}[dir=ltr] .foxit-spin-spinning{margin-right:8px}[dir=rtl] .foxit-spin-spinning{margin-left:8px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.foxit-spin-icon{position:absolute;top:50%}[dir=ltr] .foxit-spin-icon{left:50%;transform:translate(-50%,-50%)}[dir=rtl] .foxit-spin-icon{right:50%;transform:translate(50%,-50%)}.foxit-spin-small .foxit-spin-icon{font-size:16px}.foxit-spin-default .foxit-spin-icon{font-size:24px}.foxit-spin-large .foxit-spin-icon{font-size:32px}.foxit-alert{align-items:flex-start;border-radius:5px;display:flex;padding:12px}.foxit-alert-icon-container{height:20px;width:20px}[dir=ltr] .foxit-alert-icon-container{margin-right:8px}[dir=rtl] .foxit-alert-icon-container{margin-left:8px}.foxit-alert-icon{height:20px;width:20px}.foxit-alert-message{font-size:12px}.foxit-alert-success,.foxit-alert-warning{background-color:#f5fff2;border:1px solid #30dc6b}.foxit-alert-error{background-color:#fae5dd;border:1px solid #e22727}.foxit-alert-gradient{border:1px solid #ff5f00;display:block}[dir=ltr] .foxit-alert-gradient{background:linear-gradient(135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}[dir=rtl] .foxit-alert-gradient{background:linear-gradient(-135deg,#fffaf7,#f9ede3,#fffaf7,#f9ede3)}.foxit-alert-arrows{background-color:#fff;border:1px solid #ffb990;box-shadow:0 2px 8px #0000001a;position:relative}.foxit-alert-arrows-left:after,.foxit-alert-arrows-left:before{border-style:solid;content:"";height:0;position:absolute;top:50%;transform:translateY(-50%);width:0}[dir=ltr] .foxit-alert-arrows-left:after,[dir=ltr] .foxit-alert-arrows-left:before{left:-8px}[dir=rtl] .foxit-alert-arrows-left:after,[dir=rtl] .foxit-alert-arrows-left:before{right:-8px}[dir=ltr] .foxit-alert-arrows-left:before{border-color:#0000 #ffb990 #0000 #0000;border-width:9px 9px 9px 0;left:-9px}[dir=rtl] .foxit-alert-arrows-left:before{border-color:#0000 #0000 #0000 #ffb990;border-width:9px 0 9px 9px;right:-9px}[dir=ltr] .foxit-alert-arrows-left:after{border-color:#0000 #fff #0000 #0000;border-width:8px 8px 8px 0;left:-8px}[dir=rtl] .foxit-alert-arrows-left:after{border-color:#0000 #0000 #0000 #fff;border-width:8px 0 8px 8px;right:-8px}.foxit-alert-arrows-right:after,.foxit-alert-arrows-right:before{border-style:solid;content:"";height:0;position:absolute;top:50%;transform:translateY(-50%);width:0}[dir=ltr] .foxit-alert-arrows-right:after,[dir=ltr] .foxit-alert-arrows-right:before{right:-8px}[dir=rtl] .foxit-alert-arrows-right:after,[dir=rtl] .foxit-alert-arrows-right:before{left:-8px}[dir=ltr] .foxit-alert-arrows-right:before{border-color:#0000 #0000 #0000 #ffb990;border-width:9px 0 9px 9px;right:-9px}[dir=rtl] .foxit-alert-arrows-right:before{border-color:#0000 #ffb990 #0000 #0000;border-width:9px 9px 9px 0;left:-9px}[dir=ltr] .foxit-alert-arrows-right:after{border-color:#0000 #0000 #0000 #fff;border-width:8px 0 8px 8px;right:-8px}[dir=rtl] .foxit-alert-arrows-right:after{border-color:#0000 #fff #0000 #0000;border-width:8px 8px 8px 0;left:-8px}.foxit-quantity,.foxit-quantity-button{align-items:center;display:flex}.foxit-quantity-button{background-color:#ff5f00;border:none;border-radius:4px;color:#fff;cursor:pointer;height:16px;justify-content:center;margin-left:8px;margin-right:8px;width:16px}.foxit-quantity-button:disabled{background-color:#ffc2a0;cursor:not-allowed}.foxit-quantity-button>div{font-size:16px;margin-top:-3px}.foxit-quantity-number{border:1px solid #b3b3b3;border-radius:4px;color:#525252;flex:1;font-size:14px;height:24px;line-height:24px;outline:none!important;text-align:center;width:48px}.foxit-drawer-mask{background-color:#00000026;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .3s;z-index:99}.foxit-drawer-mask-open{opacity:1;pointer-events:auto}.foxit-drawer{background:#fff;height:100vh;overflow:auto;position:fixed;top:0;z-index:100}[dir=ltr] .foxit-drawer{box-shadow:-2px 0 8px #00000026;right:0;transition:right .3s}[dir=rtl] .foxit-drawer{box-shadow:2px 0 8px #00000026;left:0;transition:left .3s}.foxit-drawer-content{padding:24px}.foxit-steps{display:flex}.foxit-steps-horizontal{align-items:flex-start;flex-direction:row}.foxit-steps-vertical{flex-direction:column}.foxit-steps-item{display:flex;flex:1;position:relative}.foxit-steps-horizontal .foxit-steps-item{align-items:center;flex-direction:column;text-align:center}.foxit-steps-vertical .foxit-steps-item{align-items:flex-start;flex-direction:row;margin-bottom:16px}.foxit-steps-item-container{display:flex;position:relative;z-index:1}.foxit-steps-horizontal .foxit-steps-item-container{align-items:center;flex-direction:column}.foxit-steps-vertical .foxit-steps-item-container{align-items:flex-start;flex-direction:row}.foxit-steps-item-clickable .foxit-steps-item-container{cursor:pointer}.foxit-steps-item-clickable:hover .foxit-steps-item-title{color:FF5F00}.foxit-steps-item-icon{align-items:center;display:flex;justify-content:center;margin-bottom:8px;position:relative}.foxit-steps-vertical .foxit-steps-item-icon{margin-bottom:0;margin-top:4px}[dir=ltr] .foxit-steps-vertical .foxit-steps-item-icon{margin-right:16px}[dir=rtl] .foxit-steps-vertical .foxit-steps-item-icon{margin-left:16px}.foxit-steps-icon{align-items:center;border-radius:50%;display:flex;font-size:12px;height:16px;justify-content:center;transition:all .3s ease;width:16px}.foxit-steps-icon-wait{background-color:#fff;border:1px solid #cecece}.foxit-steps-icon-process{background-color:#ff5f00;border:1px solid #ff5f00}.foxit-steps-icon-finish{background-color:#fff;border:1px solid #ff5f00;color:#ff5f00}.foxit-steps-item-content{display:flex;flex-direction:column;min-width:0}.foxit-steps-horizontal .foxit-steps-item-content{align-items:center;text-align:center}.foxit-steps-vertical .foxit-steps-item-content{align-items:flex-start}[dir=ltr] .foxit-steps-vertical .foxit-steps-item-content{text-align:left}[dir=rtl] .foxit-steps-vertical .foxit-steps-item-content{text-align:right}.foxit-steps-item-title{color:#757575;font-size:14px;line-height:1.5;margin-bottom:4px;transition:color .3s ease}.foxit-steps-item-process .foxit-steps-item-title{color:#ff5f00;font-weight:700}.foxit-steps-item-description{color:#00000073;font-size:12px;line-height:1.5;max-width:120px}.foxit-steps-item-tail{height:1px;position:absolute;top:8px;width:calc(100% - 16px);z-index:0}[dir=ltr] .foxit-steps-item-tail{left:50%}[dir=rtl] .foxit-steps-item-tail{right:50%}[dir=ltr] .foxit-steps-horizontal .foxit-steps-item-tail{transform:translateX(8px)}[dir=rtl] .foxit-steps-horizontal .foxit-steps-item-tail{transform:translateX(-8px)}.foxit-steps-vertical .foxit-steps-item-tail{height:100%;position:absolute;top:20px;transform:none;width:1px}[dir=ltr] .foxit-steps-vertical .foxit-steps-item-tail{left:8px}[dir=rtl] .foxit-steps-vertical .foxit-steps-item-tail{right:8px}.foxit-steps-item-tail-line{background-color:#d9d9d9;height:100%;transition:background-color .3s ease;width:100%}.foxit-steps-item-finish .foxit-steps-item-tail-line{background-color:#ff6b35}.foxit-steps-item-process .foxit-steps-item-tail-line{background-color:#d9d9d9}

package/es/index.d.ts

@@ -1,7 +1,7 @@
 import Checkbox from './Checkbox/Checkbox';
 import Empty from './Empty/Empty';
 import Form, { FormItem, useFormWatch } from './Form/Form';
-import Input, { SearchInput, PasswordInput } from './Input/Input';
+import Input, { SearchInput, PasswordInput, TextArea } from './Input/Input';
 import Pagination from './Pagination/Pagination';
 import Radio from './Radio/Radio';
 import Select from './Select/Select';
@@ -17,7 +17,7 @@ export { Empty };
 export { Form, FormItem, useFormWatch };
 export type { FormRefInstance } from './Form/Form.types';
 export { Icon } from './Icon/index';
-export { Input, SearchInput, PasswordInput };
+export { Input, SearchInput, PasswordInput, TextArea };
 export { Menu, getItem } from './Menu/Menu';
 export type { MenuItem } from './Menu/Menu';
 export { Modal } from './Modal/Modal';
@@ -36,4 +36,5 @@ export { Alert } from './Alert/Alert';
 export { Quantity } from './Quantity/Quantity';
 export { Drawer } from './Drawer/Drawer';
 export { Steps } from './Steps/Steps';
+export { ConfigProvider, useConfig } from './ConfigProvider/ConfigProvider';
 export type { StepsProps, StepItem } from './Steps/Steps.types';

package/es/index.js

@@ -1,7 +1,7 @@
 export { default as Checkbox } from './Checkbox/Checkbox.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as Form } from './Form/Form.js';
-export { default as Input, PasswordInput, SearchInput } from './Input/Input.js';
+export { default as Input, PasswordInput, SearchInput, TextArea } from './Input/Input.js';
 export { default as Pagination } from './Pagination/Pagination.js';
 export { default as Radio } from './Radio/Radio.js';
 export { default as Select } from './Select/Select.js';
@@ -20,5 +20,6 @@ export { Alert } from './Alert/Alert.js';
 export { Quantity } from './Quantity/Quantity.js';
 export { Drawer } from './Drawer/Drawer.js';
 export { Steps } from './Steps/Steps.js';
+export { ConfigProvider, useConfig } from './ConfigProvider/ConfigProvider.js';
 export { default as FormItem } from './Form/FormItem.js';
 export { useFormWatch } from './Form/useFormWatch.js';

package/es/utils.d.ts

@@ -0,0 +1,2 @@
+declare const getDirection: (element?: HTMLElement | null) => 'ltr' | 'rtl';
+export { getDirection };

package/es/utils.js

@@ -0,0 +1,21 @@
+var getDirection = function (element) {
+    var _a;
+    if (typeof window === 'undefined' || !document)
+        return 'ltr';
+    var current = element || document.documentElement;
+    var htmlDir = (_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir');
+    if (htmlDir && (htmlDir === 'rtl' || htmlDir === 'ltr')) {
+        return htmlDir;
+    }
+    while (current) {
+        var dir = current.getAttribute('dir');
+        if (dir === 'rtl' || dir === 'ltr') {
+            return dir;
+        }
+        current = current.parentElement;
+    }
+    var rootDir = document.documentElement.getAttribute('dir');
+    return (rootDir === 'rtl' ? 'rtl' : 'ltr');
+};
+
+export { getDirection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foxit-component",
-  "version": "1.0.4",
+  "version": "1.0.5-alpha.2",
   "author": {
     "name": "linye",
     "email": "869675630@qq.com"
@@ -84,6 +84,7 @@
     "autoprefixer": "^10.4.20",
     "chromatic": "^11.25.2",
     "eslint-plugin-storybook": "^0.11.3",
+    "postcss-rtlcss": "^5.7.1",
     "prettier": "^3.5.1",
     "prop-types": "^15.8.1",
     "rollup": "^4.34.8",