@vtx/modals2 5.0.2 → 5.0.3

package/lib/_components/vm-title/style/index.less

@@ -0,0 +1,53 @@
+.vm-title-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  border-top: 1px solid #E5E8EF;
+  position: relative;
+  padding-left: 15px;
+  &.no-border {
+    border-top: none;
+  }
+  .vm-title-wrap-title {
+    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    font-weight: normal;
+    font-size: 16px;
+    color: #1677ff;
+  }
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 14px;
+    border-radius: 6px;
+  }
+  .vm-title-wrap-time-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #8C8C8C;
+  }
+  &.dark {
+    border-color: rgba(47, 172, 255, 0.20);
+    .vm-title-wrap-title {
+      background: linear-gradient(180deg, #fff 0%, #009dff 100%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      border-color: #2FACFF;
+    }
+    &::before {
+      background: linear-gradient(0deg, #009dff 0%, #fff 100%);
+    }
+    .vm-title-wrap-time-wrap {
+      color: #6BA6DE;
+    }
+  }
+
+  &::before {
+    background: #1677ff;
+  }
+}

package/lib/_components/vm-tooltip/index.js

@@ -0,0 +1,15 @@
+import { Tooltip } from 'antd';
+import useSettings from "../../_hooks/useSettings";
+import "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function VmFactor(props) {
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  return /*#__PURE__*/_jsx("div", {
+    className: "vm-tooltip ".concat(isDark ? 'dark' : ''),
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: item.name || '',
+      children: props.children
+    })
+  });
+}

package/lib/_components/vm-tooltip/style/index.js

@@ -0,0 +1,2 @@
+import "../../../style/index.less";
+import "./index.less";

package/lib/_components/vm-tooltip/style/index.less

@@ -0,0 +1,7 @@
+.vm-tooltip {
+  --bg: #f5f5f5;
+
+  &.dark {
+    --bg: rgba(0, 126, 255, 0.2);
+  }
+}

package/lib/_components/vm-video/RealtimeGrid.js

@@ -0,0 +1,48 @@
+import { LivePlayer } from '@vtx/player';
+import { forwardRef, useRef } from 'react';
+import VmEmpty from "../vm-empty";
+import "./index.less";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var GridItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var channel = props.channel,
+    onClose = props.onClose;
+  var name = "".concat(channel === null || channel === void 0 ? void 0 : channel.deviceName, "-").concat(channel === null || channel === void 0 ? void 0 : channel.channelName);
+  var gridItemRef = useRef(null);
+  return /*#__PURE__*/_jsx("div", {
+    className: "vm-video-content-container",
+    ref: gridItemRef,
+    children: channel !== null && channel !== void 0 && channel.url ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "vm-video-content-container-header",
+        children: /*#__PURE__*/_jsx("span", {
+          className: "title",
+          title: name,
+          children: name
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "content",
+        children: /*#__PURE__*/_jsx(LivePlayer, {
+          ref: ref,
+          beenHasVideo: channel.beenHasVideo // 对讲
+          ,
+          url: channel.url,
+          type: channel === null || channel === void 0 ? void 0 : channel.player,
+          deviceIp: channel.deviceIp,
+          devicePort: channel.devicePort,
+          captureName: name,
+          deviceId: channel.deviceId,
+          channelId: channel.channelId,
+          channelNum: channel.channelNum,
+          enableAgent: channel.enableAgent,
+          deviceCode: channel.deviceCode,
+          streamType: channel.streamType,
+          info: channel.info,
+          onClose: onClose
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(VmEmpty, {
+      type: "NO_VIDEO"
+    })
+  });
+});
+export default GridItem;

package/lib/_components/vm-video/index.js

@@ -0,0 +1,227 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _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; }
+import { Checkbox } from 'antd';
+import { cloneDeep } from 'lodash';
+import { useEffect, useState } from 'react';
+import { VmExtraTab } from '..';
+import useSettings from "../../_hooks/useSettings";
+import { getPreviewUrl } from "../../_service";
+import { ChannelOfflineIcon, Rect1Icon, Rect4Icon, Rect9Icon, ShrinkIcon } from "../../_util/iconSvgHtml";
+import { VMInput } from "../vm-filter";
+import { VmTabs } from "../vm-tabs";
+import "./index.less";
+import RealtimeGrid from "./RealtimeGrid";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VmVideo = function VmVideo(_ref) {
+  var _checkedChannels$filt;
+  var _ref$channels = _ref.channels,
+    channels = _ref$channels === void 0 ? [] : _ref$channels;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShrink = _useState2[0],
+    setIsShrink = _useState2[1];
+  var _useState3 = useState('1'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabKey = _useState4[0],
+    setTabKey = _useState4[1];
+  var _useState5 = useState('4'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mode = _useState6[0],
+    setMode = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    checkedChannels = _useState8[0],
+    setCheckedChannels = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    filterVal = _useState10[0],
+    setFilterVal = _useState10[1];
+  useEffect(function () {
+    if (channels !== null && channels !== void 0 && channels.length) {
+      var _channels$filter;
+      Promise.all(channels === null || channels === void 0 || (_channels$filter = channels.filter(function (ele, index) {
+        return index < 4;
+      })) === null || _channels$filter === void 0 ? void 0 : _channels$filter.map(function (ele) {
+        return getPreviewUrl({
+          channelNum: ele.channelNum,
+          deviceId: ele.videoDeviceId
+        });
+      })).then(function (res) {
+        setCheckedChannels(res.map(function (ele, index) {
+          return _objectSpread(_objectSpread({}, ele.data), {}, {
+            checked: index < 4
+          });
+        }));
+      });
+    }
+  }, [channels]);
+  var getActiveModeFill = function getActiveModeFill(key) {
+    if (isDark) {
+      return mode === key ? '#fff' : '#009DFF';
+    }
+    return mode === key ? '#1677FF' : '#8C8C8C';
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "vm-video ".concat(isDark ? 'dark' : ''),
+    children: [isShrink && /*#__PURE__*/_jsx("div", {
+      className: "vm-video-left-filter-btn",
+      onClick: function onClick() {
+        return setIsShrink(!isShrink);
+      },
+      children: /*#__PURE__*/_jsx(ShrinkIcon, {
+        fill: isDark ? '#009DFF' : '#595959',
+        style: {
+          transform: isShrink ? 'rotate(180deg)' : ''
+        }
+      })
+    }), !isShrink && /*#__PURE__*/_jsxs("div", {
+      className: "vm-video-left",
+      style: {
+        width: isShrink ? '24px' : '300px'
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "vm-video-left-filter",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "vm-video-left-filter-input",
+          children: /*#__PURE__*/_jsx(VMInput, {
+            onValChange: function onValChange(val) {
+              setFilterVal(val);
+            }
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "vm-video-left-filter-btn",
+          onClick: function onClick() {
+            return setIsShrink(!isShrink);
+          },
+          children: /*#__PURE__*/_jsx(ShrinkIcon, {
+            fill: isDark ? '#009DFF' : '#595959',
+            style: {
+              transform: isShrink ? 'rotate(180deg)' : ''
+            }
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "vm-video-left-channels",
+        children: checkedChannels === null || checkedChannels === void 0 || (_checkedChannels$filt = checkedChannels.filter(function (ele) {
+          return ele.channelName.indexOf(filterVal) > -1;
+        })) === null || _checkedChannels$filt === void 0 ? void 0 : _checkedChannels$filt.map(function (ele, index) {
+          var color = ele.checked ? isDark ? '#009DFF' : '#1677FF' : isDark ? '#fff' : '#595959';
+          return /*#__PURE__*/_jsx("div", {
+            className: "channels--item",
+            children: /*#__PURE__*/_jsxs(Checkbox, {
+              checked: ele.checked,
+              onChange: function onChange(e) {
+                var list = cloneDeep(checkedChannels);
+                if (e.target.checked) {
+                  getPreviewUrl({
+                    channelNum: ele.channelNum,
+                    deviceId: ele.deviceId
+                  }).then(function (res) {
+                    list[index] = _objectSpread({
+                      checked: true
+                    }, res.data);
+                    setCheckedChannels(list);
+                  });
+                } else {
+                  list[index].checked = false;
+                  list[index].url = '';
+                  list[index].player = '';
+                  setCheckedChannels(list);
+                }
+              },
+              style: {
+                color: color
+              },
+              children: [/*#__PURE__*/_jsx(ChannelOfflineIcon, {
+                fill: color
+              }), ele.channelName]
+            })
+          }, index);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "vm-video-right",
+      children: [/*#__PURE__*/_jsx(VmTabs, {
+        defaultActiveKey: "1",
+        activeKey: tabKey,
+        onChange: function onChange(key) {
+          return setTabKey(key);
+        },
+        items: [{
+          label: "\u5B9E\u65F6\u89C6\u9891",
+          key: '1'
+        }, {
+          label: "\u5386\u53F2\u89C6\u9891",
+          key: '2'
+        }],
+        tabBarExtraContent: /*#__PURE__*/_jsx(VmExtraTab, {
+          style: {
+            width: '92px'
+          },
+          value: mode,
+          data: [{
+            title: /*#__PURE__*/_jsx(Rect1Icon, {
+              fill: getActiveModeFill('1')
+            }),
+            name: '1分屏',
+            key: '1'
+          }, {
+            title: /*#__PURE__*/_jsx(Rect4Icon, {
+              fill: getActiveModeFill('4')
+            }),
+            name: '4分屏',
+            key: '4'
+          }, {
+            title: /*#__PURE__*/_jsx(Rect9Icon, {
+              fill: getActiveModeFill('9')
+            }),
+            name: '9分屏',
+            key: '9'
+          }],
+          onChange: function onChange(key) {
+            setMode(key);
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "vm-video-content _".concat(mode),
+        children: getGridItems(mode, checkedChannels === null || checkedChannels === void 0 ? void 0 : checkedChannels.filter(function (ele) {
+          return ele.channelName.indexOf(filterVal) > -1 && ele.checked;
+        }))
+      })]
+    })]
+  });
+};
+export default VmVideo;
+var getGridItems = function getGridItems(latestGrid, channels) {
+  var items = [];
+  for (var i = 0; i < Number(latestGrid); i++) {
+    var element = /*#__PURE__*/_jsx(RealtimeGrid
+    // active={state.activeIndex === i}
+    , {
+      // onClick={() => setState({ activeIndex: i })}
+      channel: channels[i] || {
+        channelNum: '',
+        channelId: ''
+      },
+      onClose: function onClose() {
+        //   closeVideo(i);
+      },
+      scale: 1
+      // onScreenshot={onScreenshot}
+    }, i);
+    items.push(element);
+  }
+  return items;
+};

package/lib/_components/vm-video/index.less

@@ -0,0 +1,168 @@
+@import '../../style/index.less';
+
+.vm-video {
+  height: 616px;
+  display: flex;
+  gap: 16px;
+
+  --wbg-color: #fff;
+  --w-color: #1f1f1f;
+  --wborder-color: #f1f0f0;
+  --check-bg: #1677ff;
+
+  &.dark {
+    --wbg-color: rgba(0, 155, 233, 10%);
+    --w-color: #fff;
+    --wborder-color: #1064a7;
+    --check-bg: #009dff;
+  }
+  .vm-video-left,
+  .vm-video-right {
+    background: var(--wbg-color);
+    border-radius: 8px;
+    color: var(--w-color);
+    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    border: 1px solid var(--wborder-color);
+    height: 100%;
+    padding: 12px 16px;
+  }
+
+  .vm-video-left {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &-filter {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      &-input {
+        flex: 1;
+      }
+
+      &-btn {
+        width: 16px;
+        padding: 0 4px;
+        cursor: pointer;
+      }
+    }
+    &-channels {
+      height: calc(100% - 46px);
+      padding-top: 12px;
+      overflow-y: auto;
+
+      .channels--item {
+        svg {
+          transform: translateY(7px);
+          margin-right: 2px;
+        }
+        .ant-checkbox {
+          transform: translateY(-2px);
+        }
+        .ant-checkbox-checked .ant-checkbox-inner {
+          background-color: var(--check-bg);
+          border-color: var(--check-bg);
+          &::after {
+            transform: rotate(45deg) scale(1) translate(-65%, -55%);
+          }
+        }
+        .ant-checkbox-inner {
+          width: 15px;
+          height: 15px;
+        }
+        .ant-checkbox-wrapper {
+          font-size: 15px;
+          //   color: var(--modal-title-color);
+        }
+        .ant-checkbox + span {
+          padding: 0 4px;
+        }
+      }
+    }
+  }
+
+  &-right {
+    flex: 1;
+  }
+
+  .ant-tabs-tabpane {
+    height: 100%;
+  }
+
+  .vm-video-content {
+    display: grid;
+    flex-grow: 1;
+    grid-gap: 16px;
+    height: calc(100% - 62px);
+
+    &._1 {
+      grid-template-rows: 1fr;
+      grid-template-columns: 1fr;
+    }
+
+    &._4 {
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+    }
+    &._9 {
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  .vm-video-content-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    // background-color: #2b3d51;
+    align-items: center;
+    border: 1px solid var(--wborder-color);
+    border-radius: 8px;
+    position: relative;
+
+    &.active {
+      box-shadow: 0 0 0 1px #52c41a;
+    }
+    > .content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .vtx-live-player {
+      border-radius: 8px;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 26px;
+      padding: 0 12px;
+      color: var(--modal-title-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+      text-align: center;
+      z-index: 1999;
+
+      .title {
+        width: 100%;
+        font-size: 14px;
+        color: white;
+        padding-right: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .close {
+        margin-left: auto;
+      }
+    }
+  }
+}

package/lib/_components/vm-wrapper/imgs/chart.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 441">
+<path id="Vector" d="M0.162774 6.49927C0.0583284 6.39498 0 6.25599 0 6.1114C0 5.96681 0.0583284 5.82782 0.162774 5.72354L5.08991 1.06916C5.13581 1.01896 5.19235 0.978742 5.25577 0.951188C5.31918 0.923634 5.38799 0.90938 5.45761 0.90938C5.52722 0.90938 5.59604 0.923634 5.65945 0.951188C5.72286 0.978742 5.77941 1.01896 5.8253 1.06916L8.9875 3.96051L13.0322 0.152384C13.1402 0.0531681 13.2845 -0.0015216 13.4341 3.22263e-05C13.5836 0.00158605 13.7266 0.0592598 13.8324 0.160697C13.9382 0.262134 13.9983 0.399265 14 0.54271C14.0016 0.686155 13.9446 0.824504 13.8411 0.928114L9.42873 5.15937C9.32052 5.26051 9.17538 5.31712 9.02427 5.31712C8.87315 5.31712 8.72802 5.26051 8.6198 5.15937L5.46128 2.26801L0.898168 6.56979C0.783132 6.62082 0.657125 6.64498 0.530471 6.64031C0.391635 6.64015 0.257969 6.58978 0.156156 6.49927H0.162774Z"/>
+<path id="Vector_2" d="M12.6278 13.418V6.58393C12.6266 6.50719 12.641 6.43099 12.6699 6.35985C12.6989 6.28872 12.742 6.2241 12.7966 6.16982C12.8511 6.11555 12.9161 6.07273 12.9876 6.0439C13.0591 6.01507 13.1357 6.00083 13.2129 6.002C13.2915 5.99524 13.3705 6.00565 13.4446 6.0325C13.5187 6.05935 13.586 6.102 13.6417 6.15745C13.6974 6.2129 13.7403 6.2798 13.7673 6.35348C13.7943 6.42715 13.8048 6.50581 13.798 6.58393V13.418C13.7864 13.5685 13.721 13.7099 13.6137 13.8166C13.5064 13.9233 13.3642 13.9884 13.2129 13.9999C13.1358 14.001 13.0592 13.9867 12.9877 13.9578C12.9163 13.9289 12.8513 13.8861 12.7968 13.8319C12.7422 13.7776 12.6992 13.713 12.6702 13.6419C12.6411 13.5708 12.6267 13.4947 12.6278 13.418ZM8.75166 13.418V9.70817C8.75057 9.63145 8.76497 9.55529 8.79399 9.4842C8.82301 9.41311 8.86606 9.34853 8.92061 9.29428C8.97516 9.24003 9.04009 9.1972 9.11156 9.16834C9.18304 9.13948 9.2596 9.12516 9.33674 9.12624C9.41537 9.11908 9.49463 9.12922 9.56888 9.15593C9.64313 9.18265 9.71057 9.22528 9.7664 9.28082C9.82224 9.33635 9.8651 9.40342 9.89196 9.47728C9.91882 9.55113 9.92902 9.62996 9.92182 9.70817V13.418C9.84869 13.7089 9.62928 13.9999 9.33674 13.9999C9.2595 14.001 9.18283 13.9867 9.11124 13.9578C9.03964 13.929 8.97457 13.8862 8.91985 13.832C8.86513 13.7778 8.82187 13.7132 8.79261 13.6421C8.76334 13.571 8.74867 13.4948 8.74946 13.418H8.75166ZM4.87549 13.418V7.23497C4.87441 7.15825 4.8888 7.08209 4.91782 7.011C4.94684 6.93991 4.9899 6.87533 5.04444 6.82108C5.09899 6.76683 5.16392 6.724 5.2354 6.69514C5.30687 6.66628 5.38344 6.65196 5.46057 6.65304C5.53932 6.64535 5.61881 6.65512 5.6933 6.68165C5.7678 6.70817 5.83546 6.7508 5.89141 6.80645C5.94737 6.8621 5.99022 6.92939 6.01689 7.00349C6.04356 7.07759 6.05338 7.15664 6.04565 7.23497V13.418C5.97252 13.7089 5.75311 13.9999 5.46057 13.9999C5.38333 14.0009 5.30667 13.9865 5.23508 13.9576C5.16349 13.9288 5.09841 13.886 5.04366 13.8318C4.9889 13.7776 4.94556 13.7131 4.91618 13.642C4.8868 13.571 4.87198 13.4948 4.87257 13.418H4.87549ZM1.00298 13.418V10.7993C1.00149 10.7225 1.01561 10.6461 1.04448 10.5748C1.07336 10.5036 1.1164 10.4388 1.17103 10.3845C1.22566 10.3302 1.29075 10.2874 1.36241 10.2586C1.43407 10.2299 1.51082 10.2159 1.58806 10.2174C1.66667 10.2103 1.74587 10.2206 1.82006 10.2473C1.89425 10.2741 1.96163 10.3167 2.01744 10.3722C2.07324 10.4277 2.11611 10.4947 2.14302 10.5685C2.16992 10.6423 2.18021 10.7211 2.17315 10.7993V13.418C2.10001 13.7089 1.88061 13.9999 1.58806 13.9999C1.51069 14.0014 1.4338 13.9873 1.36199 13.9587C1.29017 13.93 1.22489 13.8872 1.17003 13.8329C1.11517 13.7786 1.07185 13.7139 1.04265 13.6426C1.01345 13.5713 0.998964 13.4949 1.00006 13.418H1.00298Z"/>
+</g>
+</svg>

package/lib/_components/vm-wrapper/imgs/list.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1321315713">
+<g id="Vector">
+<path d="M13.3333 2.33333H4.66667C4.3 2.33333 4 2.03333 4 1.66667C4 1.3 4.3 1 4.66667 1H13.3333C13.7 1 14 1.3 14 1.66667C14 2.03333 13.7 2.33333 13.3333 2.33333ZM2 2.33333H0.666667C0.3 2.33333 0 2.03333 0 1.66667C0 1.3 0.3 1 0.666667 1H2C2.36667 1 2.66667 1.3 2.66667 1.66667C2.66667 2.03333 2.36667 2.33333 2 2.33333ZM13.3333 7.66667H4.66667C4.3 7.66667 4 7.36667 4 7C4 6.63333 4.3 6.33333 4.66667 6.33333H13.3333C13.7 6.33333 14 6.63333 14 7C14 7.36667 13.7 7.66667 13.3333 7.66667ZM2 7.66667H0.666667C0.3 7.66667 0 7.36667 0 7C0 6.63333 0.3 6.33333 0.666667 6.33333H2C2.36667 6.33333 2.66667 6.63333 2.66667 7C2.66667 7.36667 2.36667 7.66667 2 7.66667Z" />
+<path d="M13.3333 13H4.66667C4.3 13 4 12.7 4 12.3333C4 11.9667 4.3 11.6667 4.66667 11.6667H13.3333C13.7 11.6667 14 11.9667 14 12.3333C14 12.7 13.7 13 13.3333 13ZM2 13H0.666667C0.3 13 0 12.7 0 12.3333C0 11.9667 0.3 11.6667 0.666667 11.6667H2C2.36667 11.6667 2.66667 11.9667 2.66667 12.3333C2.66667 12.7 2.36667 13 2 13Z" />
+</g>
+</g>
+</svg>