clxx 2.0.5 → 2.0.7

package/build/Dialog/Wrapper.js

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Overlay } from "../Overlay";
 import { style, getAnimation } from "./style";
 export function Wrapper(props) {
@@ -27,11 +26,9 @@ export function Wrapper(props) {
             onBlankClick === null || onBlankClick === void 0 ? void 0 : onBlankClick(event);
         }
     };
-    return (jsx(Overlay, { css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick },
-        showMask && jsx("div", { css: maskCss, onClick: blankClick }),
-        jsx("div", { css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
-                if (status === "hide" && event.animationName === keyframes.name) {
-                    onHide === null || onHide === void 0 ? void 0 : onHide();
-                }
-            } }, children)));
+    return (_jsxs(Overlay, Object.assign({ css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick }, { children: [showMask && _jsx("div", { css: maskCss, onClick: blankClick }), _jsx("div", Object.assign({ css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
+                    if (status === "hide" && event.animationName === keyframes.name) {
+                        onHide === null || onHide === void 0 ? void 0 : onHide();
+                    }
+                } }, { children: children }))] })));
 }

package/build/Dialog/index.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { DialogType } from "./style";
-import { WrapperProps } from "./Wrapper";
+import React from 'react';
+import { DialogType } from './style';
+import { WrapperProps } from './Wrapper';
 export interface ShowDialogOption extends WrapperProps {
     blankClosable?: boolean;
     content?: React.ReactNode;

package/build/Dialog/index.js

@@ -7,20 +7,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from "react";
-import { createPortalDOM } from "../utils/dom";
-import { Wrapper } from "./Wrapper";
-import isPlainObject from "lodash/isPlainObject";
-import omit from "lodash/omit";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import React from 'react';
+import { createPortalDOM } from '../utils/dom';
+import { Wrapper } from './Wrapper';
+import isPlainObject from 'lodash/isPlainObject';
+import omit from 'lodash/omit';
 /**
  * 显示一个对话框，出现和隐藏都带有动画效果
  * @param option
  * @returns
  */
 export function showDialog(option) {
-    const { mount, destroy } = createPortalDOM();
+    const { mount, unmount } = createPortalDOM();
     // 生成全部配置
-    let config = { status: "show", blankClosable: false };
+    let config = { status: 'show', blankClosable: false };
     if (React.isValidElement(option) || !isPlainObject(option)) {
         config.content = option;
     }
@@ -32,15 +33,19 @@ export function showDialog(option) {
     const children = config.content;
     const onBlankClick = config.onBlankClick;
     const onHide = config.onHide;
-    const props = omit(config, ["blankClosable", "content", "onHide"]);
+    const props = omit(config, [
+        'blankClosable',
+        'content',
+        'onHide',
+    ]);
     // 关闭弹窗
     const closeDialog = () => __awaiter(this, void 0, void 0, function* () {
-        props.status = "hide";
+        props.status = 'hide';
         props.onHide = () => {
-            destroy();
+            unmount();
             onHide === null || onHide === void 0 ? void 0 : onHide();
         };
-        yield mount(React.createElement(Wrapper, Object.assign({}, props), children));
+        yield mount(_jsx(Wrapper, Object.assign({}, props, { children: children })));
     });
     // 空白处可点击关闭
     if (blankClosable) {
@@ -50,7 +55,7 @@ export function showDialog(option) {
         });
     }
     // 挂载容器对象
-    const amountShow = mount(React.createElement(Wrapper, Object.assign({}, props), children));
+    const amountShow = mount(_jsx(Wrapper, Object.assign({}, props, { children: children })));
     return () => __awaiter(this, void 0, void 0, function* () {
         // 关闭前确保容器已经被挂载
         yield amountShow;

package/build/Flex/Col.d.ts

@@ -1,10 +1,8 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { FlexProps } from ".";
-export declare function ColStart(props: FlexProps): jsx.JSX.Element;
-export declare function ColEnd(props: FlexProps): jsx.JSX.Element;
-export declare function ColCenter(props: FlexProps): jsx.JSX.Element;
-export declare function ColBetween(props: FlexProps): jsx.JSX.Element;
-export declare function ColAround(props: FlexProps): jsx.JSX.Element;
-export declare function ColEvenly(props: FlexProps): jsx.JSX.Element;
+import { FlexProps } from '.';
+export declare function ColStart(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColEnd(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColCenter(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColBetween(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColAround(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ColEvenly(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export { ColStart as Col };

package/build/Flex/Col.js

@@ -9,31 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { Flex } from ".";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Flex } from '.';
 export function ColStart(props) {
-    const { flexDirection = "column", justifyContent = "flex-start" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'flex-start' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function ColEnd(props) {
-    const { flexDirection = "column", justifyContent = "flex-end" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'flex-end' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function ColCenter(props) {
-    const { flexDirection = "column", justifyContent = "center" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'center' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function ColBetween(props) {
-    const { flexDirection = "column", justifyContent = "space-between" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'space-between' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function ColAround(props) {
-    const { flexDirection = "column", justifyContent = "space-around" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'space-around' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function ColEvenly(props) {
-    const { flexDirection = "column", justifyContent = "space-evenly" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'column', justifyContent = 'space-evenly' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export { ColStart as Col };

package/build/Flex/Row.d.ts

@@ -1,10 +1,8 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { FlexProps } from ".";
-export declare function RowStart(props: FlexProps): jsx.JSX.Element;
-export declare function RowEnd(props: FlexProps): jsx.JSX.Element;
-export declare function RowCenter(props: FlexProps): jsx.JSX.Element;
-export declare function RowBetween(props: FlexProps): jsx.JSX.Element;
-export declare function RowAround(props: FlexProps): jsx.JSX.Element;
-export declare function RowEvenly(props: FlexProps): jsx.JSX.Element;
+import { FlexProps } from '.';
+export declare function RowStart(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RowEnd(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RowCenter(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RowBetween(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RowAround(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RowEvenly(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export { RowStart as Row };

package/build/Flex/Row.js

@@ -9,31 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { Flex } from ".";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Flex } from '.';
 export function RowStart(props) {
-    const { flexDirection = "row", justifyContent = "flex-start" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'flex-start' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function RowEnd(props) {
-    const { flexDirection = "row", justifyContent = "flex-end" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'flex-end' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function RowCenter(props) {
-    const { flexDirection = "row", justifyContent = "center" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'center' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function RowBetween(props) {
-    const { flexDirection = "row", justifyContent = "space-between" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'space-between' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function RowAround(props) {
-    const { flexDirection = "row", justifyContent = "space-around" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'space-around' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export function RowEvenly(props) {
-    const { flexDirection = "row", justifyContent = "space-evenly" } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
-    return (jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
+    const { flexDirection = 'row', justifyContent = 'space-evenly' } = props, extra = __rest(props, ["flexDirection", "justifyContent"]);
+    return (_jsx(Flex, Object.assign({ flexDirection: flexDirection, justifyContent: justifyContent }, extra)));
 }
 export { RowStart as Row };

package/build/Flex/index.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
 import * as CSS from "csstype";
 export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
@@ -20,5 +18,5 @@ export interface FlexItemProps extends React.HTMLProps<HTMLDivElement> {
     flexShrink?: CSS.Property.FlexShrink;
     flexBasis?: CSS.Property.FlexBasis;
 }
-export declare function Flex(props: FlexProps): jsx.JSX.Element;
-export declare function FlexItem(props: FlexItemProps): jsx.JSX.Element;
+export declare function Flex(props: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FlexItem(props: FlexItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Flex/index.js

@@ -9,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export function Flex(props) {
     const { children, alignItems = "center", alignContent, justifyContent, flexFlow, flexWrap, flexDirection } = props, extra = __rest(props, ["children", "alignItems", "alignContent", "justifyContent", "flexFlow", "flexWrap", "flexDirection"]);
-    return (jsx("div", Object.assign({ css: {
+    return (_jsx("div", Object.assign({ css: {
             display: "flex",
             alignItems,
             alignContent,
@@ -21,16 +20,16 @@ export function Flex(props) {
             flexFlow,
             flexWrap,
             flexDirection,
-        } }, extra), children));
+        } }, extra, { children: children })));
 }
 export function FlexItem(props) {
     const { children, alignSelf, order, flex, flexGrow, flexShrink, flexBasis } = props, extra = __rest(props, ["children", "alignSelf", "order", "flex", "flexGrow", "flexShrink", "flexBasis"]);
-    return (jsx("div", Object.assign({ css: {
+    return (_jsx("div", Object.assign({ css: {
             alignSelf,
             order,
             flex,
             flexGrow,
             flexShrink,
             flexBasis,
-        } }, extra), children));
+        } }, extra, { children: children })));
 }

package/build/Indicator/index.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx, Interpolation, Theme } from "@emotion/react";
-import React from "react";
-import * as CSS from "csstype";
+import { Interpolation, Theme } from '@emotion/react';
+import React from 'react';
+import * as CSS from 'csstype';
 export interface IndicatorProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     size?: CSS.Property.Width | number;
     rounded?: boolean;
@@ -16,4 +15,4 @@ export interface IndicatorProps extends React.DetailedHTMLProps<React.HTMLAttrib
  * SVG转圈指示器，一般用作loading效果
  * @param props
  */
-export declare function Indicator(props: IndicatorProps): jsx.JSX.Element;
+export declare function Indicator(props: IndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Indicator/index.js

@@ -9,29 +9,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx, css } from "@emotion/react";
-import { adaptive, normalizeUnit } from "../utils/cssUtil";
-import { getBarChangeKeyFrames } from "./style";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { adaptive, normalizeUnit } from '../utils/cssUtil';
+import { getBarChangeKeyFrames } from './style';
 /**
  * SVG转圈指示器，一般用作loading效果
  * @param props
  */
 export function Indicator(props) {
-    const { size, rounded = true, barWidth = 7, barHeight = 28, barColor = "#fff", barCount = 12, duration = 600, containerStyle } = props, attributes = __rest(props, ["size", "rounded", "barWidth", "barHeight", "barColor", "barCount", "duration", "containerStyle"]);
+    const { size, rounded = true, barWidth = 7, barHeight = 28, barColor = '#fff', barCount = 12, duration = 600, containerStyle } = props, attributes = __rest(props, ["size", "rounded", "barWidth", "barHeight", "barColor", "barCount", "duration", "containerStyle"]);
     const radius = rounded ? barWidth / 2 : 0;
     const barList = [];
     for (let i = 0; i < barCount; i++) {
-        barList.push(jsx("rect", { key: i, x: (100 - barWidth) / 2, y: "0", rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i}, 50, 50)`, css: {
+        barList.push(_jsx("rect", { x: (100 - barWidth) / 2, y: "0", rx: radius, ry: radius, width: barWidth, height: barHeight, transform: `rotate(${(360 / barCount) * i}, 50, 50)`, css: {
                 animationDelay: `${-(duration * (barCount - i)) / barCount}ms`,
-            } }));
+            } }, i));
     }
     const style = [
         {
             fontSize: 0,
         },
     ];
-    if (typeof size !== "undefined") {
+    if (typeof size !== 'undefined') {
         const unitSize = normalizeUnit(size);
         style.push({
             width: unitSize,
@@ -46,16 +46,15 @@ export function Indicator(props) {
         }));
     }
     const svgStyle = css({
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%',
         rect: {
-            fill: "transparent",
+            fill: 'transparent',
             animationName: getBarChangeKeyFrames(barColor),
             animationDuration: `${duration}ms`,
-            animationTimingFunction: "linear",
-            animationIterationCount: "infinite",
+            animationTimingFunction: 'linear',
+            animationIterationCount: 'infinite',
         },
     });
-    return (jsx("div", Object.assign({ css: [style, containerStyle] }, attributes),
-        jsx("svg", { viewBox: "0 0 100 100", css: svgStyle }, barList)));
+    return (_jsx("div", Object.assign({ css: [style, containerStyle] }, attributes, { children: _jsx("svg", Object.assign({ viewBox: "0 0 100 100", css: svgStyle }, { children: barList })) })));
 }

package/build/Loading/Wrapper.d.ts

@@ -1,14 +1,13 @@
-/** @jsx jsx */
-import { jsx, Interpolation, Theme } from "@emotion/react";
-import React from "react";
-import { IndicatorProps } from "../Indicator";
-import { OverlayProps } from "../Overlay";
+import { Interpolation, Theme } from '@emotion/react';
+import React from 'react';
+import { IndicatorProps } from '../Indicator';
+import { OverlayProps } from '../Overlay';
 export interface LoadingWrapperProps {
-    status?: "show" | "hide";
+    status?: 'show' | 'hide';
     hint?: React.ReactNode;
     overlay?: OverlayProps;
     indicator?: IndicatorProps;
     onHide?: () => void;
     containerStyle?: Interpolation<Theme>;
 }
-export declare function Wrapper(props: LoadingWrapperProps): jsx.JSX.Element;
+export declare function Wrapper(props: LoadingWrapperProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/build/Loading/Wrapper.js

@@ -1,18 +1,17 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { style, LoadingHide } from "./style";
-import { Indicator } from "../Indicator";
-import { RowCenter } from "../Flex/Row";
-import { Overlay } from "../Overlay";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { style, LoadingHide } from './style';
+import { Indicator } from '../Indicator';
+import { RowCenter } from '../Flex/Row';
+import { Overlay } from '../Overlay';
 export function Wrapper(props) {
-    const { status = "show", hint, overlay, indicator, onHide, containerStyle, } = props;
+    const { status = 'show', hint, overlay, indicator, onHide, containerStyle, } = props;
     // 覆盖层样式
     let overlayProps = {
         centerContent: true,
         fullScreen: true,
-        maskColor: "transparent",
+        maskColor: 'transparent',
     };
-    if (typeof overlay === "object") {
+    if (typeof overlay === 'object') {
         overlayProps = Object.assign(Object.assign({}, overlayProps), overlay);
     }
     // 指示器样式
@@ -21,11 +20,11 @@ export function Wrapper(props) {
         barHeight: 25,
         barCount: 14,
     };
-    if (typeof indicator === "object") {
+    if (typeof indicator === 'object') {
         indicatorProps = Object.assign(Object.assign({}, indicatorProps), indicator);
     }
     // 根据状态设置动画
-    const animation = status === "show" ? style.boxShow : style.boxHide;
+    const animation = status === 'show' ? style.boxShow : style.boxHide;
     // 动画结束时触发的函数逻辑
     const animationEnd = (event) => {
         if (event.animationName === LoadingHide.name) {
@@ -33,14 +32,11 @@ export function Wrapper(props) {
         }
     };
     let box;
-    if (hint && typeof hint === "string") {
-        box = (jsx(RowCenter, { css: [style.boxCommon, style.boxWithExtra, animation, containerStyle], onAnimationEnd: animationEnd },
-            jsx(Indicator, Object.assign({}, indicatorProps)),
-            jsx("div", { css: style.hint }, hint)));
+    if (hint && typeof hint === 'string') {
+        box = (_jsxs(RowCenter, Object.assign({ css: [style.boxCommon, style.boxWithExtra, animation, containerStyle], onAnimationEnd: animationEnd }, { children: [_jsx(Indicator, Object.assign({}, indicatorProps)), _jsx("div", Object.assign({ css: style.hint }, { children: hint }))] })));
     }
     else {
-        box = (jsx(RowCenter, { css: [style.boxCommon, style.box, animation, containerStyle], onAnimationEnd: animationEnd },
-            jsx(Indicator, Object.assign({}, indicatorProps))));
+        box = (_jsx(RowCenter, Object.assign({ css: [style.boxCommon, style.box, animation, containerStyle], onAnimationEnd: animationEnd }, { children: _jsx(Indicator, Object.assign({}, indicatorProps)) })));
     }
-    return jsx(Overlay, Object.assign({}, overlayProps), box);
+    return _jsx(Overlay, Object.assign({}, overlayProps, { children: box }));
 }

package/build/Loading/index.d.ts

@@ -1,4 +1,4 @@
-import { LoadingWrapperProps } from "./Wrapper";
+import { LoadingWrapperProps } from './Wrapper';
 /**
  * 显示loading
  * @param hint 提示文字

package/build/Loading/index.js

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { Wrapper } from "./Wrapper";
-import { createPortalDOM } from "../utils/dom";
-import isPlainObject from "lodash/isPlainObject";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Wrapper } from './Wrapper';
+import { createPortalDOM } from '../utils/dom';
+import isPlainObject from 'lodash/isPlainObject';
 /**
  * 显示loading
  * @param hint 提示文字
@@ -19,20 +18,20 @@ import isPlainObject from "lodash/isPlainObject";
  * @returns
  */
 export function showLoading(hint, option) {
-    const { mount, destroy } = createPortalDOM();
-    let props = { hint, status: "show" };
+    const { mount, unmount } = createPortalDOM();
+    let props = { hint, status: 'show' };
     if (isPlainObject(option)) {
         delete option.status;
         props = Object.assign(Object.assign({}, props), option);
     }
     // 关闭loading
     const closeLoading = () => __awaiter(this, void 0, void 0, function* () {
-        props.status = "hide";
-        props.onHide = destroy;
-        yield mount(jsx(Wrapper, Object.assign({}, props)));
+        props.status = 'hide';
+        props.onHide = unmount;
+        yield mount(_jsx(Wrapper, Object.assign({}, props)));
     });
     // 显示loading
-    const mountShow = mount(jsx(Wrapper, Object.assign({}, props)));
+    const mountShow = mount(_jsx(Wrapper, Object.assign({}, props)));
     // 关闭loading
     return () => __awaiter(this, void 0, void 0, function* () {
         yield mountShow;

package/build/Overlay/index.d.ts

@@ -1,6 +1,4 @@
-/**@jsx jsx */
-import { jsx } from "@emotion/react";
-import React from "react";
+import React from 'react';
 export interface OverlayProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
     outside?: boolean;
@@ -13,4 +11,4 @@ export interface OverlayProps extends React.HTMLProps<HTMLDivElement> {
  * @param props
  * @returns
  */
-export declare function Overlay(props: OverlayProps): jsx.JSX.Element | null;
+export declare function Overlay(props: OverlayProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/build/Overlay/index.js

@@ -9,19 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/**@jsx jsx */
-import { jsx } from "@emotion/react";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import { getContextValue } from "../context";
-import { useWindowResize } from "../Effect/useWindowResize";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getContextValue } from '../context';
+import { useWindowResize } from '../Effect/useWindowResize';
 /**
  * 覆盖层，可以作为通用遮罩
  * @param props
  * @returns
  */
 export function Overlay(props) {
-    const { children, outside = false, centerContent = true, fullScreen = true, maskColor = "rgba(0, 0, 0, .6)" } = props, extra = __rest(props, ["children", "outside", "centerContent", "fullScreen", "maskColor"]);
+    const { children, outside = false, centerContent = true, fullScreen = true, maskColor = 'rgba(0, 0, 0, .6)' } = props, extra = __rest(props, ["children", "outside", "centerContent", "fullScreen", "maskColor"]);
     const [mount, setMount] = useState(null);
     const [innerWidth, setInnerWidth] = useState(window.innerWidth);
     // 这里是为了修复一个非挂载状态触发resize事件的bug
@@ -33,11 +32,10 @@ export function Overlay(props) {
     }, []);
     useLayoutEffect(() => {
         if (outside) {
-            const div = document.createElement("div");
+            const div = document.createElement('div');
             document.body.appendChild(div);
             setMount(div);
             return () => {
-                // ReactDOM.unmountComponentAtNode(div);
                 div.remove();
             };
         }
@@ -62,12 +60,12 @@ export function Overlay(props) {
         }
         style.push({
             zIndex: 9999,
-            position: "fixed",
+            position: 'fixed',
             top: 0,
-            left: "50%",
+            left: '50%',
             marginLeft: `-${width / 2}px`,
             width: `${width}px`,
-            height: "100%",
+            height: '100%',
             maxWidth: `${ctx.maxDocWidth}px`,
             minWidth: `${ctx.minDocWidth}px`,
             backgroundColor: maskColor,
@@ -76,12 +74,12 @@ export function Overlay(props) {
     // 如果内容居中，设置内容居中有样式
     if (centerContent) {
         style.push({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
         });
     }
-    const content = (jsx("div", Object.assign({ css: style }, extra), children));
+    const content = (_jsx("div", Object.assign({ css: style }, extra, { children: children })));
     /**
      * 如果是挂载到当前位置，直接返回
      */
@@ -97,5 +95,5 @@ export function Overlay(props) {
     /**
      * 挂载到外部，且挂载点已经准备好
      */
-    return ReactDOM.createPortal(content, mount);
+    return createPortal(content, mount);
 }

package/build/SafeArea/index.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
 export interface SafeAreaProps extends React.HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
-    type: "top" | "bottom";
+    type: 'top' | 'bottom';
 }
-export declare function SafeArea(props: SafeAreaProps): jsx.JSX.Element;
+export declare function SafeArea(props: SafeAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;