@kep-platform/basic-component 0.0.44 → 0.0.45

package/dist/Table/Table.js

@@ -1,5 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["render"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -18,6 +19,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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 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 CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
 import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
 import FilterOutlined from '@ant-design/icons/FilterOutlined';
@@ -32,59 +34,32 @@ import { List, ListItem } from "../List";
 import { Pagination } from "../Pagination";
 import { Popup } from "../PopupBox";
 import { Space } from "../Space";
-var TableContainer = styled.div.withConfig({
-  displayName: "TableContainer",
-  componentId: "basic-component-347b__sc-12r61fm-0"
-})([""]);
-var TableTitle = styled.h5.withConfig({
-  displayName: "TableTitle",
-  componentId: "basic-component-347b__sc-12r61fm-1"
-})(["font-weight:600;padding:var(--kep-platform-padding-sm);"]);
-var TableToolbar = styled.div.withConfig({
-  displayName: "TableToolbar",
-  componentId: "basic-component-347b__sc-12r61fm-2"
-})(["text-align:right;padding:var(--kep-platform-padding-sm);"]);
-var TableHeaderRow = styled(Columns).withConfig({
-  displayName: "TableHeaderRow",
-  componentId: "basic-component-347b__sc-12r61fm-3"
-})(["border-bottom:var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);position:sticky;top:0;left:0;z-index:calc(var(--kep-platform-z-index-fixed) + 5);& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;&:not(:last-child):after{content:'';width:1px;height:calc(100% - 2 * var(--kep-platform-padding-xs));position:absolute;top:var(--kep-platform-padding-xs);right:0;background-color:var(--kep-platform-color-border-secondary);}}"], Column);
-var TableBody = styled(List).withConfig({
-  displayName: "TableBody",
-  componentId: "basic-component-347b__sc-12r61fm-4"
-})([""]);
+var TableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var TableTitle = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-weight: 600;\n    padding: var(--kep-platform-padding-sm);\n"])));
+var TableToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    text-align: right;\n    padding: var(--kep-platform-padding-sm);\n"])));
+var TableHeaderRow = styled(Columns)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n    & ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n        &:not(:last-child):after {\n            content: '';\n            width: 1px;\n            height: calc(100% - 2 * var(--kep-platform-padding-xs));\n            position: absolute;\n            top: var(--kep-platform-padding-xs);\n            right: 0;\n            background-color: var(--kep-platform-color-border-secondary);\n        }\n    }\n"])), Column);
+var TableBody = styled(List)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 var TableBodyRow = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isActive'].includes(prop);
   }
-}).withConfig({
-  displayName: "TableBodyRow",
-  componentId: "basic-component-347b__sc-12r61fm-5"
-})(["& ", "{", "}"], Column, function (props) {
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    & ", " {\n        ", "\n    }\n"])), Column, function (props) {
   if (props.isActive) {
-    return css(["background-color:var(--kep-platform-color-bg-active) !important;"]);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                    background-color: var(--kep-platform-color-bg-active) !important;\n                "])));
   }
 });
-var TableContent = styled.div.withConfig({
-  displayName: "TableContent",
-  componentId: "basic-component-347b__sc-12r61fm-6"
-})(["position:relative;overflow:auto;border-radius:var(--kep-platform-border-radius);box-shadow:var(--kep-platform-box-shadow-tertiary);", ""], function (props) {
+var TableContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: auto;\n    border-radius: var(--kep-platform-border-radius);\n    box-shadow: var(--kep-platform-box-shadow-tertiary);\n    ", "\n"])), function (props) {
   var _props$scroll;
   if ((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y) {
-    return css(["height:", "px;"], props.scroll.y);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                height: ", "px;\n            "])), props.scroll.y);
   }
 });
-var SortIconList = styled(List).withConfig({
-  displayName: "SortIconList",
-  componentId: "basic-component-347b__sc-12r61fm-7"
-})([""]);
+var SortIconList = styled(List)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])));
 var SortIconListItem = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['active'].includes(prop);
   }
-}).withConfig({
-  displayName: "SortIconListItem",
-  componentId: "basic-component-347b__sc-12r61fm-8"
-})(["height:10px;line-height:10px;font-size:10px;cursor:pointer;user-select:none;color:", ";"], function (props) {
+})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: 10px;\n    line-height: 10px;\n    font-size: 10px;\n    cursor: pointer;\n    user-select: none;\n    color: ", ";\n"])), function (props) {
   return props.active ? 'var(--kep-platform-color-primary)' : 'currentColor';
 });
 var SortIconGroup = function SortIconGroup(_ref) {
@@ -115,14 +90,8 @@ var SortIconGroup = function SortIconGroup(_ref) {
     active: sorter === 'desc'
   }, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
 };
-var ColumnTitle = styled.div.withConfig({
-  displayName: "ColumnTitle",
-  componentId: "basic-component-347b__sc-12r61fm-9"
-})([""]);
-var FilterValue = styled.span.withConfig({
-  displayName: "FilterValue",
-  componentId: "basic-component-347b__sc-12r61fm-10"
-})(["color:var(--kep-platform-color-primary);cursor:pointer;padding:var(--kep-platform-padding-xxs);border-radius:var(--kep-platform-border-radius-sm);&:hover{background-color:var(--kep-platform-color-bg-active);}"]);
+var ColumnTitle = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
+var FilterValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    color: var(--kep-platform-color-primary);\n    cursor: pointer;\n    padding: var(--kep-platform-padding-xxs);\n    border-radius: var(--kep-platform-border-radius-sm);\n    &:hover {\n        background-color: var(--kep-platform-color-bg-active);\n    }\n"])));
 var ColumnTitleController = function ColumnTitleController(_ref2) {
   var onSorterChange = _ref2.onSorterChange,
     title = _ref2.title,

package/dist/Tag/Tag.js

@@ -1,13 +1,12 @@
 var _excluded = ["children"];
+var _templateObject;
 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) } })); }
 import React from 'react';
 import styled from 'styled-components';
 import theme from "../__consts/theme";
-var StyledTag = styled.span.withConfig({
-  displayName: "StyledTag",
-  componentId: "basic-component-347b__sc-14fuyeq-0"
-})(["background-color:", ";color:1px soild ", ";"], theme.defaultTagBackgroundColor, theme.defaultTagColor);
+var StyledTag = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: 1px soild ", ";\n"])), theme.defaultTagBackgroundColor, theme.defaultTagColor);
 var Tag = function Tag(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);

package/dist/Tree/MainProperties.js

@@ -1,14 +1,10 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Flex, FlexItem } from "../Flex";
-export var MainArea = styled(FlexItem).withConfig({
-  displayName: "MainArea",
-  componentId: "basic-component-347b__sc-u1pspr-0"
-})(["overflow:hidden;position:sticky;left:0;z-index:20;align-self:stretch;display:flex;align-items:center;border-right:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);"]);
-var PropertiesArea = styled(FlexItem).withConfig({
-  displayName: "PropertiesArea",
-  componentId: "basic-component-347b__sc-u1pspr-1"
-})([""]);
+export var MainArea = styled(FlexItem)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    position: sticky;\n    left: 0;\n    z-index: 20;\n    align-self: stretch;\n    display: flex;\n    align-items: center;\n    border-right: var(--kep-platform-line-width) var(--kep-platform-line-type)\n        var(--kep-platform-color-border-secondary);\n    border-bottom: var(--kep-platform-line-width) var(--kep-platform-line-type)\n        var(--kep-platform-color-border-secondary);\n"])));
+var PropertiesArea = styled(FlexItem)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 /* 有属性就渲染属性，没有属性就不处理 */
 export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var mainWidth = _ref.mainWidth,

package/dist/Tree/Tree.js

@@ -1,7 +1,9 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
@@ -15,29 +17,20 @@ var TreeContainer = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['bordered'].includes(prop);
   }
-}).withConfig({
-  displayName: "TreeContainer",
-  componentId: "basic-component-347b__sc-n4lkq9-0"
-})(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow-x: auto;\n    border: 1px solid var(--kep-platform-color-border-secondary);\n    border-width: ", ";\n"])), function (props) {
   return props.bordered ? '1px' : 0;
 });
-var TreeBody = styled(List).withConfig({
-  displayName: "TreeBody",
-  componentId: "basic-component-347b__sc-n4lkq9-1"
-})([""]);
+var TreeBody = styled(List)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 var TreeHeader = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['width', 'isFlex'].includes(prop);
   }
-}).withConfig({
-  displayName: "TreeHeader",
-  componentId: "basic-component-347b__sc-n4lkq9-2"
-})(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    background-color: var(--kep-platform-header-bg);\n    & ", ",& ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n    }\n"])), function (props) {
   if (props.isFlex) {
-    return css(["width:100%;"]);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                width: 100%;\n            "])));
   }
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 }, Column, MainArea);
 var rootLevel = -1;

package/dist/Tree/TreeNode.js

@@ -1,9 +1,11 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 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 { CaretRightOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -18,36 +20,24 @@ var ExpandedIcon = styled(CaretRightOutlined).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['expanded'].includes(prop);
   }
-}).withConfig({
-  displayName: "ExpandedIcon",
-  componentId: "basic-component-347b__sc-tzoomn-0"
-})(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    transition: transform 0.5s;\n    display: block;\n    user-select: none;\n    ", ";\n    font-size: var(--kep-platform-font-size-sm);\n    &:hover {\n        color: var(--kep-platform-color-primary);\n    }\n"])), function (props) {
   if (props.expanded) {
-    return css(["transform:rotate(90deg);"]);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                transform: rotate(90deg);\n            "])));
   }
 });
-var TitleArea = styled(FlexItem).withConfig({
-  displayName: "TitleArea",
-  componentId: "basic-component-347b__sc-tzoomn-1"
-})([""]);
-var TreeNode = styled(ListItem).withConfig({
-  displayName: "TreeNode",
-  componentId: "basic-component-347b__sc-tzoomn-2"
-})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}}", ""], function (props) {
+var TitleArea = styled(FlexItem)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+var TreeNode = styled(ListItem)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    & ", ",& ", " {\n        background-color: var(--kep-platform-color-bg-base);\n    }\n    /* \u5904\u7406\u9F20\u6807\u79FB\u5165 */\n    &:hover {\n        background-color: var(--kep-platform-color-bg-hover);\n        & ", ", & ", " {\n            background-color: var(--kep-platform-color-bg-hover);\n        }\n        & ", " {\n            overflow-x: auto;\n            & > ", " {\n                width: auto;\n            }\n        }\n        & ", " {\n            overflow-x: auto;\n        }\n    }\n    /* \u5904\u7406\u8282\u70B9\u9009\u4E2D */\n    ", "\n"])), function (props) {
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 }, Column, MainArea, Column, MainArea, MainArea, Flex, TitleArea, function (props) {
   if (props.selected) {
-    return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;& ", ",& ", "{background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}"], Column, MainArea, MainArea, Flex, TitleArea);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                background-color: var(--kep-platform-color-bg-active) !important;\n                color: var(--kep-platform-color-text-active) !important;\n                & ", ", & ", " {\n                    background-color: var(--kep-platform-color-bg-active) !important;\n                    color: var(--kep-platform-color-text-active) !important;\n                }\n                & ", " {\n                    overflow-x: auto;\n                    & > ", " {\n                        width: auto;\n                    }\n                }\n                & ", " {\n                    overflow-x: auto;\n                }\n            "])), Column, MainArea, MainArea, Flex, TitleArea);
   }
 });
-var TreeNodeGroupNode = styled.li.withConfig({
-  displayName: "TreeNodeGroupNode",
-  componentId: "basic-component-347b__sc-tzoomn-3"
-})(["height:40px;line-height:40px;background-color:var(--kep-platform-color-primary);color:var(--kep-platform-color-white);& span{color:var(--kep-platform-color-white) !important;}cursor:pointer;", ""], function (props) {
+var TreeNodeGroupNode = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 40px;\n    line-height: 40px;\n    background-color: var(--kep-platform-color-primary);\n    color: var(--kep-platform-color-white);\n    & span {\n        color: var(--kep-platform-color-white) !important;\n    }\n    cursor: pointer;\n    ", "\n"])), function (props) {
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 });
 var TreeNodeGroup = function TreeNodeGroup(props) {

package/dist/Tree/test.js

@@ -1,3 +1,4 @@
+var _templateObject;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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."); }
@@ -5,6 +6,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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 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) } })); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -110,10 +112,7 @@ var mystore = new MyStore([{
     count: 2
   }]
 }]);
-var Title = styled.div.withConfig({
-  displayName: "Title",
-  componentId: "basic-component-347b__sc-bc9b32-0"
-})(["width:100%;text-align:center;"]);
+var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    text-align: center;\n"])));
 export default (function () {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/ViewPort/Ripple.js

@@ -1,18 +1,17 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { makeAutoObservable } from 'mobx';
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
-var rippleAnimation = keyframes(["from{transform:scale(1);}to{transform:scale(4);opacity:0;}"]);
-export var Ripple = styled.div.withConfig({
-  displayName: "Ripple",
-  componentId: "basic-component-347b__sc-zqrqyo-0"
-})(["position:absolute;border-radius:50%;width:10px;height:10px;background-color:#fff0;& > div{position:absolute;left:0;top:0;width:10px;height:10px;background-color:#fff;border-radius:50%;margin-left:-5px;margin-top:-5px;transform:scale(0);animation:", " 500ms linear;}& .first{}& .second{animation-delay:150ms;}"], rippleAnimation);
+var rippleAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n        transform: scale(1);\n    }\n    to {\n\n        transform: scale(4);\n        opacity: 0;\n    }\n"])));
+export var Ripple = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    border-radius: 50%;\n    width: 10px;\n    height: 10px;\n    background-color: #fff0;\n    & > div {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 10px;\n        height: 10px;\n        background-color: #fff;\n        border-radius: 50%;\n        margin-left: -5px;\n        margin-top: -5px;\n        transform: scale(0);\n        animation: ", " 500ms linear;\n    }\n    & .first {\n    }\n    & .second {\n        animation-delay: 150ms;\n    }\n"])), rippleAnimation);
 export var RippleManagerStore = /*#__PURE__*/function () {
   function RippleManagerStore() {
     _classCallCheck(this, RippleManagerStore);

package/dist/ViewPort/ViewPort.js

@@ -1,22 +1,18 @@
 var _excluded = ["children", "viewPortStore", "onScroll", "onScale"],
   _excluded2 = ["children", "viewPortStore"];
+var _templateObject, _templateObject2;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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) } })); }
 import { DndContext, useDraggable } from '@dnd-kit/core';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { RippleManagerStore } from "./Ripple";
 import { ViewPortWindow } from "./ViewPortWindow";
-var Container = styled.div.withConfig({
-  displayName: "Container",
-  componentId: "basic-component-347b__sc-1qpmpop-0"
-})(["position:relative;border:1px solid #eee;box-shadow:0 0 7px 0 inset #fefefe;"]);
-var Content = styled.div.withConfig({
-  displayName: "Content",
-  componentId: "basic-component-347b__sc-1qpmpop-1"
-})(["position:absolute;"]);
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    border: 1px solid #eee;\n    box-shadow: 0 0 7px 0 inset #fefefe;\n"])));
+var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n"])));
 var rippleManagerStore = new RippleManagerStore();
 var ViewPortEntity = observer(function (props) {
   var children = props.children,

package/dist/ViewPort/test.js

@@ -1,4 +1,6 @@
+var _templateObject;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -43,10 +45,7 @@ var WindowManager = /*#__PURE__*/function () {
   return WindowManager;
 }();
 var windowManager = new WindowManager();
-var StyledViewPort = styled(ViewPort).withConfig({
-  displayName: "StyledViewPort",
-  componentId: "basic-component-347b__sc-1b1xrkc-0"
-})(["border:1px solid #eee;"]);
+var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #eee;\n"])));
 export default observer(function Test() {
   useEffect(function () {
     function setWidthHeight() {

package/dist/Window/Window.js

@@ -1,3 +1,5 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { CloseCircleOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef } from 'react';
@@ -9,68 +11,29 @@ var WindowContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isMinimize'].includes(prop);
   }
-}).withConfig({
-  displayName: "WindowContainer",
-  componentId: "basic-component-347b__sc-7yonmq-0"
-})(["box-shadow:var(--kep-platform-box-shadow);position:absolute;padding:", ";border-radius:4px;background-color:#fff;overflow:hidden;"], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-shadow: var(--kep-platform-box-shadow);\n    position: absolute;\n    padding: ", ";\n    border-radius: 4px;\n    background-color: #fff;\n    overflow: hidden;\n"])), function (props) {
   return props.isMinimize ? '0px' : '6px';
 });
-var WindowEntity = styled.div.withConfig({
-  displayName: "WindowEntity",
-  componentId: "basic-component-347b__sc-7yonmq-1"
-})(["width:100%;height:100%;"]);
+var WindowEntity = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n"])));
 var WindowHeader = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isDragging'].includes(prop);
   }
-}).withConfig({
-  displayName: "WindowHeader",
-  componentId: "basic-component-347b__sc-7yonmq-2"
-})(["height:40px;padding:6px;border-radius:4px;line-height:26px;font-size:16px;background-color:var(--kep-platform-color-primary);transition:margin 0.35s,opacity 0.7s,box-shadow 0.7s;position:relative;color:#fff;cursor:move;& > h5{color:#fff;}&:hover{opacity:0.9;}", ""], function (props) {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 40px;\n    padding: 6px;\n    border-radius: 4px;\n    line-height: 26px;\n    font-size: 16px;\n    background-color: var(--kep-platform-color-primary);\n    transition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n    position: relative;\n    color: #fff;\n    cursor: move;\n    & > h5 {\n        color: #fff;\n    }\n    &:hover {\n        opacity: 0.9;\n    }\n    ", "\n"])), function (props) {
   if (props.isDragging) {
-    return css(["margin:0 4px;"]);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                margin: 0 4px;\n            "])));
   }
 });
-var WindowHeaderOptions = styled.div.withConfig({
-  displayName: "WindowHeaderOptions",
-  componentId: "basic-component-347b__sc-7yonmq-3"
-})(["position:absolute;right:6px;top:6px;"]);
-var WindowBody = styled.div.withConfig({
-  displayName: "WindowBody",
-  componentId: "basic-component-347b__sc-7yonmq-4"
-})(["overflow:auto;padding:12px;"]);
-var WindowControllerLeft = styled(WindowController).withConfig({
-  displayName: "WindowControllerLeft",
-  componentId: "basic-component-347b__sc-7yonmq-5"
-})(["position:absolute;width:6px;left:0;top:0;bottom:0;cursor:e-resize;"]);
-var WindowControllerRight = styled(WindowController).withConfig({
-  displayName: "WindowControllerRight",
-  componentId: "basic-component-347b__sc-7yonmq-6"
-})(["position:absolute;width:6px;height:100%;right:0;top:0;bottom:0;cursor:e-resize;"]);
-var WindowControllerTop = styled(WindowController).withConfig({
-  displayName: "WindowControllerTop",
-  componentId: "basic-component-347b__sc-7yonmq-7"
-})(["position:absolute;width:100%;height:6px;left:0;right:0;top:0;cursor:n-resize;"]);
-var WindowControllerBottom = styled(WindowController).withConfig({
-  displayName: "WindowControllerBottom",
-  componentId: "basic-component-347b__sc-7yonmq-8"
-})(["position:absolute;width:100%;height:6px;left:0;right:0;bottom:0;cursor:n-resize;"]);
-var WindowControllerLeftTop = styled(WindowController).withConfig({
-  displayName: "WindowControllerLeftTop",
-  componentId: "basic-component-347b__sc-7yonmq-9"
-})(["position:absolute;width:6px;height:6px;left:0;top:0;cursor:nwse-resize;"]);
-var WindowControllerLeftBottom = styled(WindowController).withConfig({
-  displayName: "WindowControllerLeftBottom",
-  componentId: "basic-component-347b__sc-7yonmq-10"
-})(["position:absolute;width:6px;height:6px;left:0;bottom:0;cursor:nesw-resize;"]);
-var WindowControllerRightTop = styled(WindowController).withConfig({
-  displayName: "WindowControllerRightTop",
-  componentId: "basic-component-347b__sc-7yonmq-11"
-})(["position:absolute;width:6px;height:6px;right:0;top:0;cursor:nesw-resize;"]);
-var WindowControllerRightBottom = styled(WindowController).withConfig({
-  displayName: "WindowControllerRightBottom",
-  componentId: "basic-component-347b__sc-7yonmq-12"
-})(["position:absolute;width:6px;height:6px;right:0;bottom:0;cursor:nwse-resize;"]);
+var WindowHeaderOptions = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    right: 6px;\n    top: 6px;\n"])));
+var WindowBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    overflow: auto;\n    padding: 12px;\n    flex: 1;\n"])));
+var WindowControllerLeft = styled(WindowController)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    cursor: e-resize;\n"])));
+var WindowControllerRight = styled(WindowController)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 100%;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    cursor: e-resize;\n"])));
+var WindowControllerTop = styled(WindowController)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: 6px;\n    left: 0;\n    right: 0;\n    top: 0;\n    cursor: n-resize;\n"])));
+var WindowControllerBottom = styled(WindowController)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: 6px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    cursor: n-resize;\n"])));
+var WindowControllerLeftTop = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    left: 0;\n    top: 0;\n    cursor: nwse-resize;\n"])));
+var WindowControllerLeftBottom = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    left: 0;\n    bottom: 0;\n    cursor: nesw-resize;\n"])));
+var WindowControllerRightTop = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    right: 0;\n    top: 0;\n    cursor: nesw-resize;\n"])));
+var WindowControllerRightBottom = styled(WindowController)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    right: 0;\n    bottom: 0;\n    cursor: nwse-resize;\n"])));
 var Window = observer(function (props) {
   var window = props.window,
     title = props.title,
@@ -82,7 +45,6 @@ var Window = observer(function (props) {
     var _windowContainerRef$c;
     function stopWheel(e) {
       e.stopPropagation();
-      e.preventDefault();
     }
     (_windowContainerRef$c = windowContainerRef.current) === null || _windowContainerRef$c === void 0 || _windowContainerRef$c.addEventListener('wheel', stopWheel);
     return function () {

package/dist/Window/WindowController.js

@@ -1,14 +1,13 @@
 var _excluded = ["type", "window", "children"];
+var _templateObject;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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) } })); }
 import { useDraggable } from '@dnd-kit/core';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-var WindowControllerContainer = styled.div.withConfig({
-  displayName: "WindowControllerContainer",
-  componentId: "basic-component-347b__sc-1rv6ocd-0"
-})(["&:active,&:focus{outline:none;}"]);
+var WindowControllerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:active,\n    &:focus {\n        outline: none;\n    }\n"])));
 export default function WindowController(props) {
   var type = props.type,
     window = props.window,

package/dist/Window/WindowOption.js

@@ -1,4 +1,5 @@
 var _excluded = ["icon"];
+var _templateObject, _templateObject2;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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."); }
@@ -8,20 +9,18 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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) } })); }
 import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 var WindowOptionContainer = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['active'].includes(prop);
   }
-}).withConfig({
-  displayName: "WindowOptionContainer",
-  componentId: "basic-component-347b__sc-1ebf27x-0"
-})(["cursor:pointer;& svg{transition:transform 0.5s;color:", ";}&:hover{& svg{transform:scale(1.2);}}", ""], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n    & svg {\n        transition: transform 0.5s;\n        color: ", ";\n    }\n    &:hover {\n        & svg {\n            transform: scale(1.2);\n        }\n    }\n    ", "\n"])), function (props) {
   return props.color || 'auto';
 }, function (props) {
   if (props.active) {
-    return css(["& svg{transform:scale(0.9) !important;}"]);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                & svg {\n                    transform: scale(0.9) !important;\n                }\n            "])));
   }
 });
 export default function WindowOption(props) {

package/dist/Window/test.js

@@ -1,55 +1,27 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { DndContext } from '@dnd-kit/core';
-import { makeAutoObservable } from 'mobx';
 import { observer, useLocalObservable } from 'mobx-react-lite';
 import React from 'react';
-import { ViewPort, ViewPortStore } from "../ViewPort";
 import { GlobalStyles } from "../__styles";
 import Window from "./Window";
 import { WindowStore } from "./index";
-var WindowManager = /*#__PURE__*/function () {
-  function WindowManager() {
-    _classCallCheck(this, WindowManager);
-    _defineProperty(this, "windows", [new WindowStore('jss', this.closeWindowHanlder.bind(this)), new WindowStore('jx', this.closeWindowHanlder.bind(this)), new WindowStore('jiangxin', this.closeWindowHanlder.bind(this)), new WindowStore('xixi', this.closeWindowHanlder.bind(this))]);
-    makeAutoObservable(this);
-  }
-  _createClass(WindowManager, [{
-    key: "closeWindowHanlder",
-    value: function closeWindowHanlder(id) {
-      this.windows = this.windows.filter(function (window) {
-        return window.id !== id;
-      });
-    }
-  }, {
-    key: "report",
-    get: function get() {
-      return this.windows.map(function (window) {
-        return window.id;
-      }).join(',');
-    }
-  }]);
-  return WindowManager;
-}();
-var windowManager = new WindowManager();
 export default observer(function Test() {
-  var viewPortStore = useLocalObservable(function () {
-    return new ViewPortStore();
+  var windowStore = useLocalObservable(function () {
+    return new WindowStore('jss');
   });
-  return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(GlobalStyles, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
-  }), /*#__PURE__*/React.createElement(ViewPort, {
-    viewPortStore: viewPortStore
-  }, windowManager.windows.map(function (windowStore) {
-    return /*#__PURE__*/React.createElement(Window, {
-      window: windowStore,
-      key: windowStore.id,
-      title: 'xixi'
-    }, "123");
-  })));
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      height: '1000px'
+    }
+  }, /*#__PURE__*/React.createElement(Window, {
+    window: windowStore,
+    key: windowStore.id,
+    title: 'xixi'
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'pink',
+      width: '1000px'
+    }
+  }, "121asdjklfjikasdhujikfh awkldjnfhb qweuijfklasdbnhuifwoqnf jkhweuof jkhwuifhqwdh jknwjkd klfhwdujih fuoqwjn klnfkmsdhnajikfh jklasdkl jdklajkl jfklasdjkl jkldjiof1huihfklnsdjklf2", /*#__PURE__*/React.createElement("br", null), "asdjklfjasdklj kljasdkldjf iawhjio jkldjnsajhnfujihnfffffffffffffffffffffffffffffffffffffffffffffffffklasdnmkdlf djkafljkdlfjkl;asdf fjklasdjkl;fjdaskl;jfk;asdf asdjfkasdjkf;f asjfiko;djaskl;fjas fjikasdjfk;asd", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "djklasdjkl;jaksdjkl; askdjkl jaksdjk l;asd"))));
 });