@cloud-app-dev/vidc 4.0.15 → 4.1.0

package/es/DynamicList/index.js

@@ -1,20 +1,22 @@
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+var _templateObject, _templateObject2;
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useUpdateEffect } from 'ahooks';
 import { Skeleton } from 'antd';
-import React, { useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import useInfiniteScroll from "../useInfiniteScroll";
 import useVirtualList from "../useVirtualList";
 import { LIMIT, skeletonList } from "./utils";
-
-//style
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var dynamicListLayoutCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  border: 1px solid var(--gray2);\n"])));
+var dynamicBoxCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: auto;\n  contain: strict;\n"])));
 function DynamicList(_ref) {
   var renderItem = _ref.renderItem,
     itemHeight = _ref.itemHeight,
@@ -50,13 +52,13 @@ function DynamicList(_ref) {
     _useVirtualList2 = _slicedToArray(_useVirtualList, 2),
     list = _useVirtualList2[0],
     scrollTo = _useVirtualList2[1];
-  _useUpdateEffect(function () {
+  useUpdateEffect(function () {
     return scrollTo(0);
   }, reloadDeps ? reloadDeps : []);
   return /*#__PURE__*/_jsx("div", {
-    className: "l-c-dynamic-list-layout",
+    className: dynamicListLayoutCss,
     children: /*#__PURE__*/_jsxs("div", {
-      className: "l-c-dynamic-box",
+      className: dynamicBoxCss,
       ref: containerRef,
       children: [/*#__PURE__*/_jsx("div", {
         ref: wrapperRef,

package/es/ErrorFallback/index.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { ErrorBoundaryProps } from './inerface';
 interface IErrorFallbackProps {
     error: Error;
     resetErrorBoundary: () => void;
 }
-declare function ErrorFallback({ error, resetErrorBoundary }: IErrorFallbackProps): JSX.Element;
+declare function ErrorFallback({ error, resetErrorBoundary }: IErrorFallbackProps): import("react/jsx-runtime").JSX.Element;
 export declare const errorBoundaryOptions: ErrorBoundaryProps;
 export default ErrorFallback;

package/es/EventTools/index.d.ts

@@ -1,3 +1,3 @@
 import EventEmitter from '../SocketEmitter/eventEmitter';
-declare const EventTools: typeof EventEmitter;
+declare const EventTools: EventEmitter;
 export default EventTools;

package/es/GridList/demo.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => import("react/jsx-runtime").JSX.Element;
+export default App;

package/es/GridList/{Demo.js → demo.js}

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import data from "./data";
 import GridList from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/GridList/hook.js

@@ -1,4 +1,3 @@
-import _useScroll from "ahooks/es/useScroll";
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -6,6 +5,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useScroll } from 'ahooks';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getColumnWidth, getElementOffset, getElementSize, getWindowScroll, getWindowSize, isSameElementScroll, isSameElementSize } from "./utils";
 export function useConstRef(value) {
@@ -125,7 +125,7 @@ export function useIntersecting(ref, rootMargin) {
 }
 export function useGridListContainerData(ref) {
   var windowSize = useWindowSize();
-  var windowScroll = _useScroll(ref);
+  var windowScroll = useScroll(ref);
   var elementWindowOffset = useElementWindowOffset(ref);
   var elementSize = useElementSize(ref);
   return useMemo(function () {

package/es/GridList/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { GridListCell, GridListItemData } from './interface';
-import './index.less';
 export interface GridListProps<P> {
     items: P[];
     getGridGap?: (elementWidth: number, windowHeight: number) => number;

package/es/GridList/index.js

@@ -1,8 +1,11 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React, { useRef } from 'react';
 import { useGridListConfigData, useGridListContainerData, useGridListLayoutData, useGridListRenderData, useIntersecting } from "./hook";
 import { getGridRowStart } from "./utils";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
+var cloudappGridListCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: auto;\n  contain: strict;\n  box-sizing: border-box;\n"])));
 var GridList = /*#__PURE__*/React.forwardRef(function GridList(props, ref) {
   var containerRef = useRef(null);
   var domRef = ref !== null && ref !== void 0 ? ref : containerRef;
@@ -14,7 +17,7 @@ var GridList = /*#__PURE__*/React.forwardRef(function GridList(props, ref) {
   var colWidth = props.fixedColumnWidth ? "".concat(props.fixedColumnWidth, "px") : '1fr';
   return /*#__PURE__*/_jsx("div", {
     ref: domRef,
-    className: "cloudapp-grid-list ".concat(props.className || ''),
+    className: "".concat(cloudappGridListCss, " ").concat(props.className || ''),
     children: /*#__PURE__*/_jsx("div", {
       style: {
         boxSizing: 'border-box',

package/es/HightLevel/index.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import './index.less';
 interface HightLevelProps {
     keyword: string;
     name: string;
 }
-declare function HighLevel({ keyword, name }: HightLevelProps): JSX.Element;
+declare function HighLevel({ keyword, name }: HightLevelProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof HighLevel>;
 export default _default;

package/es/HightLevel/index.js

@@ -1,6 +1,5 @@
+import { escapeRegExp, replace } from 'lodash-es';
 import React from 'react';
-import { replace, escapeRegExp } from 'lodash-es';
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 function HighLevel(_ref) {
   var keyword = _ref.keyword,
@@ -11,7 +10,7 @@ function HighLevel(_ref) {
     });
   }
   var reg = new RegExp(escapeRegExp(keyword), 'g');
-  var html = replace(name, reg, "<span class=\"high-level\">".concat(keyword, "</span>"));
+  var html = replace(name, reg, "<span style=\"color: var(--primary-dark);\">".concat(keyword, "</span>"));
   return /*#__PURE__*/_jsx("span", {
     dangerouslySetInnerHTML: {
       __html: html

package/es/IconFont/index.d.ts

@@ -5,7 +5,7 @@ export interface IIconFontProps extends React.HTMLAttributes<HTMLSpanElement> {
     title?: string;
     style?: React.CSSProperties;
 }
-declare function IconFont({ type, className, title, style, ...props }: IIconFontProps): JSX.Element;
+declare function IconFont({ type, className, title, style, ...props }: IIconFontProps): import("react/jsx-runtime").JSX.Element;
 declare namespace IconFont {
     var registerIconFont: (scriptUrl: string) => void;
 }

package/es/LabelValue/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 interface ILabelValueProps {
     label?: any;
     value?: any;
@@ -11,5 +10,5 @@ interface ILabelValueProps {
     labelStyle?: React.CSSProperties;
     valueStyle?: React.CSSProperties;
 }
-declare function LabelValue({ label, value, emptyValue, className, style, labelStyle, valueStyle, noWrap, noColon }: ILabelValueProps): JSX.Element;
+declare function LabelValue({ label, value, emptyValue, className, style, labelStyle, valueStyle, noWrap, noColon }: ILabelValueProps): import("react/jsx-runtime").JSX.Element;
 export default LabelValue;

package/es/LabelValue/index.js

@@ -1,7 +1,10 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React from 'react';
-import "./index.less";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+var classname = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  font-size: var(--fs-small);\n  span {\n    &:first-child {\n      padding-right: 4px;\n      color: var(--color4);\n      white-space: nowrap;\n    }\n\n    &:last-child {\n      flex: 1;\n      color: var(--color6);\n\n      &.no-wrap {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    }\n  }\n"])));
 function LabelValue(_ref) {
   var label = _ref.label,
     value = _ref.value,
@@ -16,7 +19,7 @@ function LabelValue(_ref) {
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     noColon = _ref.noColon;
   return /*#__PURE__*/_jsxs("div", {
-    className: "lm-c-label-value-layout ".concat(className),
+    className: "".concat(classname, " ").concat(className),
     style: style,
     children: [/*#__PURE__*/_jsxs("span", {
       style: labelStyle,

package/es/List/demo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/es/List/demo.js

@@ -11,8 +11,7 @@ export default (function () {
   return /*#__PURE__*/_jsx("div", {
     style: {
       width: 300,
-      height: 600,
-      border: '1px solid #000'
+      height: 600
     },
     children: /*#__PURE__*/_jsx(List, {
       list: defaultList,

package/es/List/index.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import './index.less';
 export interface ListProps<T> {
     /**
      * @description 列表数据
      * @default []
      */
-    list?: Array<T>;
+    list: Array<T>;
     /**
      * @description 列表类名
      * @default ''
@@ -24,5 +23,5 @@ export interface ListProps<T> {
     rowHeight?: number;
     renderHeaderExt?: () => JSX.Element;
 }
-declare function List<T>(props: ListProps<T>): JSX.Element;
+declare function List<T>({ className, style, renderItem, list, rowHeight, renderHeaderExt }: ListProps<T>): import("react/jsx-runtime").JSX.Element;
 export default List;

package/es/List/index.js

@@ -1,28 +1,36 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React from 'react';
-import VList from "../VList";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function List(props) {
-  var className = props.className,
-    style = props.style,
-    renderItem = props.renderItem,
-    list = props.list,
-    rowHeight = props.rowHeight,
-    renderHeaderExt = props.renderHeaderExt;
+var listWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  cursor: auto;\n  border: 1px solid var(--gray2);\n  flex-direction: column;\n"])));
+var listlayout = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
+var vidcSimpleListLayout = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  contain: strict;\n"])));
+function List(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    renderItem = _ref.renderItem,
+    list = _ref.list,
+    _ref$rowHeight = _ref.rowHeight,
+    rowHeight = _ref$rowHeight === void 0 ? 30 : _ref$rowHeight,
+    renderHeaderExt = _ref.renderHeaderExt;
   return /*#__PURE__*/_jsxs("div", {
-    className: "lm-c-list-wrapper ".concat(className),
+    className: "".concat(listWrapper, " ").concat(className),
     style: style,
     children: [/*#__PURE__*/_jsx("div", {
-      className: "lm-c-list-header",
       children: renderHeaderExt === null || renderHeaderExt === void 0 ? void 0 : renderHeaderExt()
     }), /*#__PURE__*/_jsx("div", {
-      className: "lm-c-base-list-layout",
-      children: /*#__PURE__*/_jsx(VList, {
-        className: "lm-c-virtual-layout",
-        data: list,
-        rowHeight: rowHeight || 30,
-        renderItem: renderItem
+      className: listlayout,
+      children: /*#__PURE__*/_jsx("div", {
+        className: vidcSimpleListLayout,
+        style: {
+          contentVisibility: 'auto',
+          containIntrinsicSize: list.length * rowHeight
+        },
+        children: list.map(function (ele, index) {
+          return renderItem(ele, index);
+        })
       })
     })]
   });

package/es/ListWithSizeAnimate/demo.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export default function App(): JSX.Element;
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/es/ListWithSizeAnimate/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IDynamicGridListProps } from '../DynamicGridList';
-import './index.less';
 interface IListWithSizeAnimateProps<T> extends IDynamicGridListProps<T> {
     children?: React.ReactNode;
     header?: React.ReactNode;

package/es/ListWithSizeAnimate/index.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import _useEventListener from "ahooks/es/useEventListener";
 var _excluded = ["header", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -14,12 +14,19 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { css } from '@emotion/css';
+import { useEventListener } from 'ahooks';
 import React, { useImperativeHandle, useMemo, useRef } from 'react';
 import DynamicGridList from "../DynamicGridList";
 import useSimpleState from "../useSimpleState";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var listWithSizeAnimateLayout = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  flex-direction: column;\n"])));
+var istAnimateHeader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition: max-height 0.2s;\n"])));
+var listAnimateContent = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n  transition: height 0.2s;\n  flex-direction: column;\n"])));
+var dynamicGridList = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
 var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAnimate(_ref, forwardRef) {
   var _ref$current2;
   var header = _ref.header,
@@ -35,9 +42,9 @@ var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAni
   var headerHeight = useMemo(function () {
     return state.open ? 1000 : 0;
   }, [state.open]);
-  _useEventListener('scroll', function () {
+  useEventListener('scroll', function () {
     var _ref$current;
-    var ele = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.cloudapp-dynamic-grid-list');
+    var ele = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.dynamic-grid-list');
     if ((ele === null || ele === void 0 ? void 0 : ele.scrollTop) === 0) {
       updateState({
         open: true
@@ -48,7 +55,7 @@ var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAni
       });
     }
   }, {
-    target: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector('.cloudapp-dynamic-grid-list')
+    target: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector('.dynamic-grid-list')
   });
   useImperativeHandle(forwardRef, function () {
     return {
@@ -64,7 +71,7 @@ var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAni
       },
       backTop: function backTop() {
         var _ref$current3, _ref$current3$querySe;
-        return (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : (_ref$current3$querySe = _ref$current3.querySelector('.cloudapp-dynamic-grid-list')) === null || _ref$current3$querySe === void 0 ? void 0 : _ref$current3$querySe.scrollTo({
+        return (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : (_ref$current3$querySe = _ref$current3.querySelector('.dynamic-grid-list')) === null || _ref$current3$querySe === void 0 ? void 0 : _ref$current3$querySe.scrollTo({
           top: 0
         });
       }
@@ -73,10 +80,10 @@ var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAni
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   return /*#__PURE__*/_jsxs("div", {
-    className: "list-with-size-animate-layout",
+    className: listWithSizeAnimateLayout,
     ref: ref,
     children: [/*#__PURE__*/_jsx("div", {
-      className: "list-animate-header",
+      className: istAnimateHeader,
       style: {
         maxHeight: headerHeight,
         overflow: !state.open ? 'hidden' : undefined
@@ -86,11 +93,13 @@ var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAni
         children: header
       })
     }), /*#__PURE__*/_jsxs("div", {
-      className: "list-animate-content",
+      className: listAnimateContent,
       children: [/*#__PURE__*/_jsx("div", {
         className: "list-animate-content-ext",
         children: children
-      }), /*#__PURE__*/_jsx(DynamicGridList, _objectSpread({}, props))]
+      }), /*#__PURE__*/_jsx(DynamicGridList, _objectSpread(_objectSpread({}, props), {}, {
+        className: dynamicGridList
+      }))]
     })]
   });
 });

package/es/LoaderScript/index.d.ts

@@ -43,5 +43,5 @@ export interface ILoaderProps {
      */
     onLoadEnd?: () => Promise<null>;
 }
-declare function LoaderScripts({ options, children, Spin, onLoadEnd }: ILoaderProps): JSX.Element;
+declare function LoaderScripts({ options, children, Spin, onLoadEnd }: ILoaderProps): import("react/jsx-runtime").JSX.Element;
 export default LoaderScripts;

package/es/Picture/component/DefaultRects/RectInfo.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { RectType } from '../../interface';
 interface IRectInfoProps {
     item: RectType;
     containerDom: HTMLDivElement;
 }
-declare function RectInfo({ item, containerDom }: IRectInfoProps): JSX.Element;
+declare function RectInfo({ item, containerDom }: IRectInfoProps): import("react/jsx-runtime").JSX.Element;
 export default RectInfo;

package/es/Picture/component/DefaultRects/RectInfo.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import IconFont from "../../../IconFont";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -12,15 +12,17 @@ var RECT_INFO_WIDTH = 150;
 var RECT_INFO_HEIGHT = 24;
 var RECT_WINDOW_MARGIN = 6;
 function RectInfo(_ref) {
+  var _item$tags2, _item$tags3;
   var item = _ref.item,
     containerDom = _ref.containerDom;
   var position = useMemo(function () {
+    var _item$tags;
     var _containerDom$getBoun = containerDom.getBoundingClientRect(),
       width = _containerDom$getBoun.width,
       height = _containerDom$getBoun.height;
     var _rectInfoWidth$rectIn = {
         rectInfoWidth: RECT_INFO_WIDTH,
-        rectInfoHeight: item.tags.length * RECT_INFO_HEIGHT + 6 + 30
+        rectInfoHeight: ((_item$tags = item.tags) !== null && _item$tags !== void 0 ? _item$tags : []).length * RECT_INFO_HEIGHT + 6 + 30
       },
       rectInfoWidth = _rectInfoWidth$rectIn.rectInfoWidth,
       rectInfoHeight = _rectInfoWidth$rectIn.rectInfoHeight;
@@ -46,7 +48,7 @@ function RectInfo(_ref) {
       width: rectInfoWidth,
       height: rectInfoHeight
     };
-  }, [containerDom, item.rect, item.tags.length]);
+  }, [containerDom, item.rect, ((_item$tags2 = item.tags) !== null && _item$tags2 !== void 0 ? _item$tags2 : []).length]);
   return /*#__PURE__*/_jsxs("div", {
     className: "rect-info-list-wrapper",
     style: {
@@ -70,7 +72,7 @@ function RectInfo(_ref) {
       })]
     }), /*#__PURE__*/_jsx("ul", {
       className: "rect-info-list",
-      children: item.tags.map(function (v, index) {
+      children: ((_item$tags3 = item.tags) !== null && _item$tags3 !== void 0 ? _item$tags3 : []).map(function (v, index) {
         return /*#__PURE__*/_jsxs("li", {
           className: "info-item",
           title: v.titleAttr,

package/es/Picture/component/DefaultRects/index.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { RectType } from '../../interface';
-import './index.less';
 interface IDefaultRectsProps {
     rects: RectType[];
     containerDom: HTMLDivElement;
@@ -9,5 +7,5 @@ interface IDefaultRectsProps {
     }) => void;
     getRectImage: (rect: number[]) => string | null;
 }
-declare function DefaultRects({ rects, containerDom, onClickRect, getRectImage }: IDefaultRectsProps): JSX.Element;
+declare function DefaultRects({ rects, containerDom, onClickRect, getRectImage }: IDefaultRectsProps): import("react/jsx-runtime").JSX.Element;
 export default DefaultRects;

package/es/Picture/component/DefaultRects/index.js

@@ -6,8 +6,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { useCallback, useMemo } from 'react';
 import RectInfo from "./RectInfo";
+import { borderBottomDecorator, borderTopDecorator, rectItem, typeRect } from "./style";
 import { computedZIndex } from "./utils";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,9 +29,9 @@ function DefaultRects(_ref) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: renderRects.map(function (v, k) {
       return /*#__PURE__*/_jsxs("div", {
-        className: "rect-item-wrapper rect-item-".concat(v.type, "-wrapper"),
+        className: typeRect[v.type],
         children: [/*#__PURE__*/_jsxs("div", {
-          className: 'rect-item',
+          className: "rect-item ".concat(rectItem),
           onClick: function onClick(e) {
             return rectClick(e, v);
           },
@@ -43,9 +43,9 @@ function DefaultRects(_ref) {
             zIndex: k
           },
           children: [/*#__PURE__*/_jsx("div", {
-            className: "border-top-decorator"
+            className: "border-top-decorator ".concat(borderTopDecorator)
           }), /*#__PURE__*/_jsx("div", {
-            className: "border-bottom-decorator"
+            className: "border-bottom-decorator ".concat(borderBottomDecorator)
           })]
         }), Array.isArray(v.tags) && v.tags.length > 0 && /*#__PURE__*/_jsx(RectInfo, {
           item: v,

package/es/Picture/component/DefaultRects/style.d.ts

@@ -0,0 +1,10 @@
+export declare const rectItem: string;
+export declare const borderTopDecorator: string;
+export declare const borderBottomDecorator: string;
+export declare const typeRect: {
+    face: string;
+    body: string;
+    vehicle: string;
+    nonVehicle: string;
+    thing: string;
+};

package/es/Picture/component/DefaultRects/style.js

@@ -0,0 +1,28 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+var borderDecoratorColorMixin = function borderDecoratorColorMixin(color) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .border-top-decorator {\n      &::before {\n        border-top-color: ", ";\n        border-left-color: ", ";\n      }\n\n      &::after {\n        border-top-color: ", ";\n        border-right-color: ", ";\n      }\n    }\n\n    .border-bottom-decorator {\n      &::before {\n        border-bottom-color: ", ";\n        border-left-color: ", ";\n      }\n\n      &::after {\n        border-bottom-color: ", ";\n        border-right-color: ", ";\n      }\n    }\n  "])), color, color, color, color, color, color, color, color);
+};
+var rectItemStyleMixin = function rectItemStyleMixin(color, lightColor, shadowColor) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .rect-item {\n      border-color: ", ";\n      ", ";\n      &:hover {\n        border-color: ", ";\n        box-shadow: inset 0 0 24px 0 ", ";\n      }\n    }\n  "])), lightColor, borderDecoratorColorMixin(color), color, shadowColor);
+};
+var rectInfoListMixin = function rectInfoListMixin(color, bgColor) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .rect-info-list-wrapper {\n      .data-type {\n        .data-tag {\n          background: ", ";\n          border: 1px solid ", ";\n        }\n      }\n    }\n  "])), bgColor, color);
+};
+var rectItemWrapperface = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), rectItemStyleMixin('#ff5f57', 'rgba(255, 95, 87, .6)', 'rgba(255, 95, 87, .4)'), rectInfoListMixin('#FF5F57', 'rgba(255,95,87,.6)'));
+var rectItemWrapperbody = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), rectItemStyleMixin('#ffbb22', 'rgba(255, 187, 34, .6)', 'rgba(255, 187, 34, .4)'), rectInfoListMixin('#FFBB22', 'rgba(255,187,34,.6)'));
+var rectItemWrappervehicle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), rectItemStyleMixin('#44aaff', 'rgba(68, 170, 255, .6)', 'rgba(68, 170, 255, .4)'), rectInfoListMixin('#44aaff', 'rgba(68,170,255,.6)'));
+var rectItemWrappernonVehicle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), rectItemStyleMixin('#50e9b2', 'rgba(80, 233, 178, .6)', 'rgba(80, 233, 178, .4)'), rectInfoListMixin('#50e9b2', 'rgba(80,233,178,.6)'));
+var rectItemWrapperthing = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), rectItemStyleMixin('#b946d2', 'rgba(185, 70, 210, .6)', 'rgba(185, 70, 210, .4)'), rectInfoListMixin('#b946d2', 'rgba(185, 70, 210, .6)'));
+export var rectItem = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-width: 1px;\n  border-style: solid;\n  cursor: pointer;\n"])));
+var borderDecorator = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  pointer-events: none;\n  &::before,\n  &::after {\n    display: block;\n    width: 8px;\n    height: 8px;\n    border: 2px solid transparent;\n    content: '';\n  }\n  &::before {\n    float: left;\n    margin-left: -1px;\n  }\n  &::after {\n    float: right;\n    margin-right: -1px;\n  }\n"])));
+export var borderTopDecorator = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ";\n  top: 0;\n  &::before,\n  &::after {\n    margin-top: -1px;\n  }\n"])), borderDecorator);
+export var borderBottomDecorator = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", ";\n  bottom: 0;\n  &::before,\n  &::after {\n    margin-bottom: -1px;\n  }\n"])), borderDecorator);
+export var typeRect = {
+  face: rectItemWrapperface,
+  body: rectItemWrapperbody,
+  vehicle: rectItemWrappervehicle,
+  nonVehicle: rectItemWrappernonVehicle,
+  thing: rectItemWrapperthing
+};

package/es/Picture/component/DrawRect/index.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { MenuRectType } from '../../interface';
-import './index.less';
 interface IDrawRectProps {
     rect: number[];
     canRenderMenu?: boolean;
@@ -9,5 +7,5 @@ interface IDrawRectProps {
     menus: MenuRectType[];
     getRectImage: (rect: number[]) => string | null;
 }
-declare function DrawRect({ rect, canRenderMenu, containerDom, onMenuClick, menus, getRectImage }: IDrawRectProps): JSX.Element;
+declare function DrawRect({ rect, canRenderMenu, containerDom, onMenuClick, menus, getRectImage }: IDrawRectProps): import("react/jsx-runtime").JSX.Element;
 export default DrawRect;

package/es/Picture/component/DrawRect/index.js

@@ -1,15 +1,18 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { useCallback, useMemo } from 'react';
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useCallback, useMemo } from 'react';
 import RectMenu from "../RectMenu";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var cssbox = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  border: 1px solid;\n  box-shadow: 0 0 0 9999em rgb(0 0 0 / 40%);\n  border-image-source: url('data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==');\n  border-image-repeat: repeat;\n  border-image-slice: 1;\n"])));
 function DrawRect(_ref) {
   var _ref$rect = _ref.rect,
     rect = _ref$rect === void 0 ? [] : _ref$rect,
@@ -32,7 +35,7 @@ function DrawRect(_ref) {
   }, [getRectImage, onMenuClick, rect]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: "select-rect-layout",
+      className: cssbox,
       style: {
         left: rect[0],
         top: rect[1],