element-plus 1.2.0-beta.5 → 1.2.0-beta.6

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v1.2.0-beta.5 */
+/*! Element Plus v1.2.0-beta.6 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -73,32 +73,6 @@
     });
   };
 
-  const useFocus = (el) => {
-    return {
-      focus: () => {
-        var _a, _b;
-        (_b = (_a = el.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
-      }
-    };
-  };
-
-  const elFormKey = Symbol("elForm");
-  const elFormItemKey = Symbol("elFormItem");
-
-  const buttonGroupContextKey = Symbol("buttonGroupContextKey");
-
-  const elBreadcrumbKey = Symbol("elBreadcrumbKey");
-
-  const elPaginationKey = Symbol("elPaginationKey");
-
-  const configProviderContextKey = Symbol();
-
-  const radioGroupKey = Symbol("radioGroupKey");
-
-  const tabsRootContextKey = Symbol("tabsRootContextKey");
-
-  const scrollbarContextKey = Symbol("scrollbarContextKey");
-
   /**
    * Make a map and return a function for checking if a key
    * is in that map.
@@ -136,49 +110,16 @@
   const camelize = cacheStringFunction((str) => {
       return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
   });
+  const hyphenateRE = /\B([A-Z])/g;
+  /**
+   * @private
+   */
+  const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
   /**
    * @private
    */
   const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
 
-  const wrapperKey = Symbol();
-  const propKey = Symbol();
-  function buildProp(option, key) {
-    if (!isObject$a(option) || !!option[propKey])
-      return option;
-    const { values, required, default: defaultValue, type, validator } = option;
-    const _validator = values || validator ? (val) => {
-      let valid = false;
-      let allowedValues = [];
-      if (values) {
-        allowedValues = [...values, defaultValue];
-        valid || (valid = allowedValues.includes(val));
-      }
-      if (validator)
-        valid || (valid = validator(val));
-      if (!valid && allowedValues.length > 0) {
-        const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
-        vue.warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`);
-      }
-      return valid;
-    } : void 0;
-    return {
-      type: typeof type === "object" && Object.getOwnPropertySymbols(type).includes(wrapperKey) ? type[wrapperKey] : type,
-      required: !!required,
-      default: defaultValue,
-      validator: _validator,
-      [propKey]: true
-    };
-  }
-  const buildProps = (props) => fromPairs_1(Object.entries(props).map(([key, option]) => [
-    key,
-    buildProp(option, key)
-  ]));
-  const definePropType = (val) => ({ [wrapperKey]: val });
-  const keyOf = (arr) => Object.keys(arr);
-  const mutable = (val) => val;
-  const componentSize = ["large", "medium", "small", "mini"];
-
   /**
    * Removes all key-value entries from the list cache.
    *
@@ -2688,40 +2629,107 @@
     };
   };
 
-  const sizes = ["", ...componentSize];
-  const useFormItemProps = buildProps({
-    size: {
-      type: String,
-      values: sizes,
-      default: ""
-    },
-    disabled: Boolean
-  });
-  const useFormItem = ({ size, disabled } = {}) => {
-    var _a;
-    const vm = vue.getCurrentInstance();
-    const $ELEMENT = useGlobalConfig$1();
-    const props = (_a = vm.proxy) == null ? void 0 : _a.$props;
+  const elFormKey = Symbol("elForm");
+  const elFormItemKey = Symbol("elFormItem");
+
+  const buttonGroupContextKey = Symbol("buttonGroupContextKey");
+
+  const elBreadcrumbKey = Symbol("elBreadcrumbKey");
+
+  const elPaginationKey = Symbol("elPaginationKey");
+
+  const configProviderContextKey = Symbol();
+
+  const radioGroupKey = Symbol("radioGroupKey");
+
+  const tabsRootContextKey = Symbol("tabsRootContextKey");
+
+  const scrollbarContextKey = Symbol("scrollbarContextKey");
+
+  const wrapperKey = Symbol();
+  const propKey = Symbol();
+  function buildProp(option, key) {
+    if (!isObject$a(option) || !!option[propKey])
+      return option;
+    const { values, required, default: defaultValue, type, validator } = option;
+    const _validator = values || validator ? (val) => {
+      let valid = false;
+      let allowedValues = [];
+      if (values) {
+        allowedValues = [...values, defaultValue];
+        valid || (valid = allowedValues.includes(val));
+      }
+      if (validator)
+        valid || (valid = validator(val));
+      if (!valid && allowedValues.length > 0) {
+        const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
+        vue.warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`);
+      }
+      return valid;
+    } : void 0;
+    return {
+      type: typeof type === "object" && Object.getOwnPropertySymbols(type).includes(wrapperKey) ? type[wrapperKey] : type,
+      required: !!required,
+      default: defaultValue,
+      validator: _validator,
+      [propKey]: true
+    };
+  }
+  const buildProps = (props) => fromPairs_1(Object.entries(props).map(([key, option]) => [
+    key,
+    buildProp(option, key)
+  ]));
+  const definePropType = (val) => ({ [wrapperKey]: val });
+  const keyOf = (arr) => Object.keys(arr);
+  const mutable = (val) => val;
+  const componentSize = ["large", "medium", "small", "mini"];
+
+  const useSizeProp = buildProp({
+    type: String,
+    values: ["", ...componentSize],
+    default: ""
+  });
+  const useSize = (fallback, ignore = {}) => {
+    const emptyRef = vue.ref(void 0);
+    const size = ignore.prop ? emptyRef : useProp("size");
+    const globalConfig = ignore.global ? emptyRef : useGlobalConfig("size");
+    const globalConfigLegacy = ignore.global ? { size: void 0 } : useGlobalConfig$1();
+    const form = ignore.form ? { size: void 0 } : vue.inject(elFormKey, void 0);
+    const formItem = ignore.formItem ? { size: void 0 } : vue.inject(elFormItemKey, void 0);
+    return vue.computed(() => size.value || vue.unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || globalConfigLegacy.size || "");
+  };
+  const useDisabled$1 = (fallback) => {
+    const disabled = useProp("disabled");
+    const form = vue.inject(elFormKey, void 0);
+    return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false);
+  };
+
+  const useFocus = (el) => {
+    return {
+      focus: () => {
+        var _a, _b;
+        (_b = (_a = el.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      }
+    };
+  };
+
+  const useFormItem = () => {
     const form = vue.inject(elFormKey, void 0);
     const formItem = vue.inject(elFormItemKey, void 0);
     return {
-      size: vue.computed(() => {
-        return props.size || vue.unref(size) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || $ELEMENT.size || "";
-      }),
-      disabled: vue.computed(() => {
-        return props.disabled === true || vue.unref(disabled) || (form == null ? void 0 : form.disabled) || false;
-      }),
       form,
       formItem
     };
   };
 
-  const defaultConfig = {
-    button: {
-      autoInsertSpace: false
+  function useGlobalConfig(key) {
+    const config = vue.inject(configProviderContextKey, {});
+    if (key) {
+      return vue.toRef(config, key);
+    } else {
+      return config;
     }
-  };
-  const useGlobalConfig = () => vue.inject(configProviderContextKey, defaultConfig);
+  }
 
   var baseGetTag = _baseGetTag,
       isObjectLike$3 = isObjectLike_1;
@@ -3234,7 +3242,7 @@
     }
   });
   const localeContextKey = Symbol("localeContextKey");
-  let localeContextCache;
+  let cache$1;
   const provideLocale = () => {
     const vm = vue.getCurrentInstance();
     const props = vm.props;
@@ -3246,11 +3254,14 @@
       lang,
       t
     };
-    localeContextCache = provides;
+    cache$1 = provides;
     vue.provide(localeContextKey, provides);
   };
-  const buildTranslator = (locale) => (path) => translate(path, vue.unref(locale));
-  const translate = (path, locale) => get_1(locale, path, "");
+  const buildTranslator = (locale) => (path, option) => translate(path, option, vue.unref(locale));
+  const translate = (path, option, locale) => get_1(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => {
+    var _a;
+    return `${(_a = option == null ? void 0 : option[key]) != null ? _a : `{${key}}`}`;
+  });
   const localeProviderMaker = (locale = English) => {
     const lang = vue.ref(locale.name);
     const localeRef = vue.ref(locale);
@@ -3261,7 +3272,7 @@
     };
   };
   const useLocale = () => {
-    return vue.inject(localeContextKey, localeContextCache || localeProviderMaker(English));
+    return vue.inject(localeContextKey, cache$1 || localeProviderMaker(English));
   };
 
   let scrollBarWidth;
@@ -3446,6 +3457,9 @@
     if (!vue.isRef(trigger)) {
       throwError("[useLockscreen]", "You need to pass a ref param to this function");
     }
+    if (isServer || hasClass(document.body, "el-popup-parent--hidden")) {
+      return;
+    }
     let scrollBarWidth = 0;
     let withoutHiddenClass = false;
     let bodyPaddingRight = "0";
@@ -3729,7 +3743,8 @@
     down: "ArrowDown",
     esc: "Escape",
     delete: "Delete",
-    backspace: "Backspace"
+    backspace: "Backspace",
+    numpadEnter: "NumpadEnter"
   };
   const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`;
   const isVisible = (element) => {
@@ -6567,6 +6582,14 @@
     }, { immediate: true });
   };
 
+  const useProp = (name) => {
+    const vm = vue.getCurrentInstance();
+    return vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = vm.proxy) == null ? void 0 : _a.$props[name]) != null ? _b : void 0;
+    });
+  };
+
   const useRestoreActive = (toggle, initialFocus) => {
     let previousActive;
     vue.watch(() => toggle.value, (val) => {
@@ -6629,7 +6652,7 @@
     return throttled;
   };
 
-  const version$1 = "1.2.0-beta.5";
+  const version$1 = "1.2.0-beta.6";
 
   const makeInstaller = (components = []) => {
     const apps = [];
@@ -6642,9 +6665,7 @@
       if (apps.includes(app))
         return;
       apps.push(app);
-      components.forEach((c) => {
-        app.use(c);
-      });
+      components.forEach((c) => app.use(c));
       if (option.locale) {
         const localeProvides = localeProviderMaker(opts.locale);
         app.provide(localeContextKey, localeProvides);
@@ -6657,7 +6678,6 @@
       install
     };
   };
-  var makeInstaller$1 = makeInstaller;
 
   const withInstall = (main, extra) => {
     main.install = (app) => {
@@ -6707,7 +6727,7 @@
     change: (fixed) => typeof fixed === "boolean"
   };
 
-  var script$2y = vue.defineComponent({
+  var script$1Y = vue.defineComponent({
     name: "ElAffix",
     props: affixProps,
     emits: affixEmits,
@@ -6805,7 +6825,7 @@
     }
   });
 
-  function render$2r(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$1R(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: "root",
       class: "el-affix",
@@ -6820,10 +6840,10 @@
     ], 4);
   }
 
-  script$2y.render = render$2r;
-  script$2y.__file = "packages/components/affix/src/affix.vue";
+  script$1Y.render = render$1R;
+  script$1Y.__file = "packages/components/affix/src/affix.vue";
 
-  const ElAffix = withInstall(script$2y);
+  const ElAffix = withInstall(script$1Y);
 
   const iconProps = buildProps({
     size: {
@@ -6834,7 +6854,7 @@
     }
   });
 
-  var script$2x = vue.defineComponent({
+  var script$1X = vue.defineComponent({
     name: "ElIcon",
     inheritAttrs: false,
     props: iconProps,
@@ -6857,7 +6877,7 @@
     }
   });
 
-  function render$2q(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
       class: "el-icon",
       style: _ctx.style
@@ -6866,931 +6886,901 @@
     ], 16);
   }
 
-  script$2x.render = render$2q;
-  script$2x.__file = "packages/components/icon/src/icon.vue";
+  script$1X.render = render$1Q;
+  script$1X.__file = "packages/components/icon/src/icon.vue";
 
-  const ElIcon = withInstall(script$2x);
+  const ElIcon = withInstall(script$1X);
   var ElIcon$1 = ElIcon;
 
-  var script$2w = vue.defineComponent({
+  var _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const _sfc_main$B = vue.defineComponent({
     name: "ArrowDown"
   });
-
   const _hoisted_1$1Y = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1z = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1z = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+    d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
   }, null, -1);
-  function render$2p(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1Y, [
-      _hoisted_2$1z
-    ]);
+  const _hoisted_3$1m = [
+    _hoisted_2$1z
+  ];
+  function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1Y, _hoisted_3$1m);
   }
+  var arrowDown = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B]]);
 
-  script$2w.render = render$2p;
-  script$2w.__file = "packages/components/ArrowDown.vue";
-
-  var ArrowDown = script$2w;
-
-  var script$2v = vue.defineComponent({
+  const _sfc_main$A = vue.defineComponent({
     name: "ArrowLeft"
   });
-
   const _hoisted_1$1X = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1y = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1y = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+    d: "M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"
   }, null, -1);
-  function render$2o(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1X, [
-      _hoisted_2$1y
-    ]);
+  const _hoisted_3$1l = [
+    _hoisted_2$1y
+  ];
+  function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1X, _hoisted_3$1l);
   }
+  var arrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A]]);
 
-  script$2v.render = render$2o;
-  script$2v.__file = "packages/components/ArrowLeft.vue";
-
-  var ArrowLeft = script$2v;
-
-  var script$2u = vue.defineComponent({
-    name: "ArrowUp"
+  const _sfc_main$z = vue.defineComponent({
+    name: "ArrowRight"
   });
-
   const _hoisted_1$1W = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1x = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1x = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"
+    d: "M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"
   }, null, -1);
-  function render$2n(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1W, [
-      _hoisted_2$1x
-    ]);
+  const _hoisted_3$1k = [
+    _hoisted_2$1x
+  ];
+  function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1W, _hoisted_3$1k);
   }
+  var arrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z]]);
 
-  script$2u.render = render$2n;
-  script$2u.__file = "packages/components/ArrowUp.vue";
-
-  var ArrowUp = script$2u;
+  const _sfc_main$y = vue.defineComponent({
+    name: "ArrowUp"
+  });
+  const _hoisted_1$1V = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
+  };
+  const _hoisted_2$1w = /* @__PURE__ */ vue.createElementVNode("path", {
+    fill: "currentColor",
+    d: "M488.832 344.32l-339.84 356.672a32 32 0 000 44.16l.384.384a29.44 29.44 0 0042.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0042.688 0l.384-.384a32 32 0 000-44.16L535.168 344.32a32 32 0 00-46.336 0z"
+  }, null, -1);
+  const _hoisted_3$1j = [
+    _hoisted_2$1w
+  ];
+  function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1V, _hoisted_3$1j);
+  }
+  var arrowUp = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y]]);
 
-  var script$2t = vue.defineComponent({
+  const _sfc_main$x = vue.defineComponent({
     name: "Back"
   });
-
-  const _hoisted_1$1V = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1U = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1w = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1v = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
+    d: "M224 480h640a32 32 0 110 64H224a32 32 0 010-64z"
   }, null, -1);
-  const _hoisted_3$Q = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_3$1i = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
+    d: "M237.248 512l265.408 265.344a32 32 0 01-45.312 45.312l-288-288a32 32 0 010-45.312l288-288a32 32 0 1145.312 45.312L237.248 512z"
   }, null, -1);
-  function render$2m(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1V, [
-      _hoisted_2$1w,
-      _hoisted_3$Q
-    ]);
+  const _hoisted_4$A = [
+    _hoisted_2$1v,
+    _hoisted_3$1i
+  ];
+  function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1U, _hoisted_4$A);
   }
+  var back = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x]]);
 
-  script$2t.render = render$2m;
-  script$2t.__file = "packages/components/Back.vue";
-
-  var Back = script$2t;
-
-  var script$2s = vue.defineComponent({
+  const _sfc_main$w = vue.defineComponent({
     name: "Calendar"
   });
-
-  const _hoisted_1$1U = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1T = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1v = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1u = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0v32zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64z"
+    d: "M128 384v512h768V192H768v32a32 32 0 11-64 0v-32H320v32a32 32 0 01-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1164 0v32h160a32 32 0 0132 32v768a32 32 0 01-32 32H96a32 32 0 01-32-32V160a32 32 0 0132-32h160V96a32 32 0 0164 0v32zm-32 384h64a32 32 0 010 64h-64a32 32 0 010-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64zm192-192h64a32 32 0 010 64h-64a32 32 0 010-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64zm192-192h64a32 32 0 110 64h-64a32 32 0 110-64zm0 192h64a32 32 0 110 64h-64a32 32 0 110-64z"
   }, null, -1);
-  function render$2l(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1U, [
-      _hoisted_2$1v
-    ]);
+  const _hoisted_3$1h = [
+    _hoisted_2$1u
+  ];
+  function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1T, _hoisted_3$1h);
   }
+  var calendar = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w]]);
 
-  script$2s.render = render$2l;
-  script$2s.__file = "packages/components/Calendar.vue";
-
-  var Calendar = script$2s;
-
-  var script$2r = vue.defineComponent({
+  const _sfc_main$v = vue.defineComponent({
     name: "CaretRight"
   });
-
-  const _hoisted_1$1T = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1S = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1u = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1t = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
     d: "M384 192v640l384-320.064z"
   }, null, -1);
-  function render$2k(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1T, [
-      _hoisted_2$1u
-    ]);
+  const _hoisted_3$1g = [
+    _hoisted_2$1t
+  ];
+  function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1S, _hoisted_3$1g);
   }
+  var caretRight = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v]]);
 
-  script$2r.render = render$2k;
-  script$2r.__file = "packages/components/CaretRight.vue";
-
-  var CaretRight = script$2r;
-
-  var script$2q = vue.defineComponent({
+  const _sfc_main$u = vue.defineComponent({
     name: "CaretTop"
   });
-
-  const _hoisted_1$1S = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1R = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1t = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1s = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 320 192 704h639.936z"
+    d: "M512 320L192 704h639.936z"
   }, null, -1);
-  function render$2j(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1S, [
-      _hoisted_2$1t
-    ]);
+  const _hoisted_3$1f = [
+    _hoisted_2$1s
+  ];
+  function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1R, _hoisted_3$1f);
   }
+  var caretTop = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u]]);
 
-  script$2q.render = render$2j;
-  script$2q.__file = "packages/components/CaretTop.vue";
-
-  var CaretTop = script$2q;
-
-  var script$2p = vue.defineComponent({
+  const _sfc_main$t = vue.defineComponent({
     name: "Check"
   });
-
-  const _hoisted_1$1R = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1Q = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1s = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1r = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
+    d: "M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z"
   }, null, -1);
-  function render$2i(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1R, [
-      _hoisted_2$1s
-    ]);
+  const _hoisted_3$1e = [
+    _hoisted_2$1r
+  ];
+  function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1Q, _hoisted_3$1e);
   }
+  var check = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t]]);
 
-  script$2p.render = render$2i;
-  script$2p.__file = "packages/components/Check.vue";
-
-  var Check = script$2p;
-
-  var script$2o = vue.defineComponent({
+  const _sfc_main$s = vue.defineComponent({
     name: "CircleCheckFilled"
   });
-
-  const _hoisted_1$1Q = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1P = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1r = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1q = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"
+    d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 10-54.336 54.336l126.72 126.72a38.272 38.272 0 0054.336 0l262.4-262.464a38.4 38.4 0 10-54.272-54.336L456.192 600.384z"
   }, null, -1);
-  function render$2h(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1Q, [
-      _hoisted_2$1r
-    ]);
+  const _hoisted_3$1d = [
+    _hoisted_2$1q
+  ];
+  function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1P, _hoisted_3$1d);
   }
+  var circleCheckFilled = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s]]);
 
-  script$2o.render = render$2h;
-  script$2o.__file = "packages/components/CircleCheckFilled.vue";
-
-  var CircleCheckFilled = script$2o;
-
-  var script$2n = vue.defineComponent({
+  const _sfc_main$r = vue.defineComponent({
     name: "CircleCheck"
   });
-
-  const _hoisted_1$1P = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1O = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1q = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1p = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
+    d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
   }, null, -1);
-  const _hoisted_3$P = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_3$1c = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"
+    d: "M745.344 361.344a32 32 0 0145.312 45.312l-288 288a32 32 0 01-45.312 0l-160-160a32 32 0 1145.312-45.312L480 626.752l265.344-265.408z"
   }, null, -1);
-  function render$2g(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1P, [
-      _hoisted_2$1q,
-      _hoisted_3$P
-    ]);
+  const _hoisted_4$z = [
+    _hoisted_2$1p,
+    _hoisted_3$1c
+  ];
+  function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1O, _hoisted_4$z);
   }
+  var circleCheck = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r]]);
 
-  script$2n.render = render$2g;
-  script$2n.__file = "packages/components/CircleCheck.vue";
-
-  var CircleCheck = script$2n;
-
-  var script$2m = vue.defineComponent({
+  const _sfc_main$q = vue.defineComponent({
     name: "CircleCloseFilled"
   });
-
-  const _hoisted_1$1O = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1N = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1p = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1o = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
+    d: "M512 64a448 448 0 110 896 448 448 0 010-896zm0 393.664L407.936 353.6a38.4 38.4 0 10-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1054.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1054.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 10-54.336-54.336L512 457.664z"
   }, null, -1);
-  function render$2f(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1O, [
-      _hoisted_2$1p
-    ]);
+  const _hoisted_3$1b = [
+    _hoisted_2$1o
+  ];
+  function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1N, _hoisted_3$1b);
   }
+  var circleCloseFilled = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q]]);
 
-  script$2m.render = render$2f;
-  script$2m.__file = "packages/components/CircleCloseFilled.vue";
-
-  var CircleCloseFilled = script$2m;
-
-  var script$2l = vue.defineComponent({
+  const _sfc_main$p = vue.defineComponent({
     name: "CircleClose"
   });
-
-  const _hoisted_1$1N = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+  const _hoisted_1$1M = {
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1o = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1n = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
+    d: "M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
   }, null, -1);
-  const _hoisted_3$O = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_3$1a = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
+    d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
   }, null, -1);
-  function render$2e(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1N, [
-      _hoisted_2$1o,
-      _hoisted_3$O
-    ]);
-  }
-
-  script$2l.render = render$2e;
-  script$2l.__file = "packages/components/CircleClose.vue";
-
-  var CircleClose = script$2l;
-
-  var script$2k = vue.defineComponent({
-    name: "ArrowRight"
-  });
-
-  const _hoisted_1$1M = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
-  };
-  const _hoisted_2$1n = /* @__PURE__ */ vue.createVNode("path", {
-    fill: "currentColor",
-    d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
-  }, null, -1);
-  function render$2d(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1M, [
-      _hoisted_2$1n
-    ]);
+  const _hoisted_4$y = [
+    _hoisted_2$1n,
+    _hoisted_3$1a
+  ];
+  function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1M, _hoisted_4$y);
   }
+  var circleClose = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p]]);
 
-  script$2k.render = render$2d;
-  script$2k.__file = "packages/components/ArrowRight.vue";
-
-  var ArrowRight = script$2k;
-
-  var script$2j = vue.defineComponent({
+  const _sfc_main$o = vue.defineComponent({
     name: "Clock"
   });
-
   const _hoisted_1$1L = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1m = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1m = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
+    d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
   }, null, -1);
-  const _hoisted_3$N = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_3$19 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
+    d: "M480 256a32 32 0 0132 32v256a32 32 0 01-64 0V288a32 32 0 0132-32z"
   }, null, -1);
-  const _hoisted_4$x = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_4$x = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
     d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z"
   }, null, -1);
-  function render$2c(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1L, [
-      _hoisted_2$1m,
-      _hoisted_3$N,
-      _hoisted_4$x
-    ]);
+  const _hoisted_5$p = [
+    _hoisted_2$1m,
+    _hoisted_3$19,
+    _hoisted_4$x
+  ];
+  function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1L, _hoisted_5$p);
   }
+  var clock = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]]);
 
-  script$2j.render = render$2c;
-  script$2j.__file = "packages/components/Clock.vue";
-
-  var Clock = script$2j;
-
-  var script$2i = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "Close"
   });
-
   const _hoisted_1$1K = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1l = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1l = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+    d: "M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"
   }, null, -1);
-  function render$2b(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1K, [
-      _hoisted_2$1l
-    ]);
+  const _hoisted_3$18 = [
+    _hoisted_2$1l
+  ];
+  function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1K, _hoisted_3$18);
   }
+  var close$2 = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
 
-  script$2i.render = render$2b;
-  script$2i.__file = "packages/components/Close.vue";
-
-  var Close = script$2i;
-
-  var script$2h = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "DArrowLeft"
   });
-
   const _hoisted_1$1J = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1k = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1k = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"
+    d: "M529.408 149.376a29.12 29.12 0 0141.728 0 30.592 30.592 0 010 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 01-.512 43.264 29.12 29.12 0 01-41.216-.512L197.76 534.272a32 32 0 010-44.672l331.648-340.224zm256 0a29.12 29.12 0 0141.728 0 30.592 30.592 0 010 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 01-.512 43.264 29.12 29.12 0 01-41.216-.512L453.76 534.272a32 32 0 010-44.672l331.648-340.224z"
   }, null, -1);
-  function render$2a(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1J, [
-      _hoisted_2$1k
-    ]);
+  const _hoisted_3$17 = [
+    _hoisted_2$1k
+  ];
+  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1J, _hoisted_3$17);
   }
+  var dArrowLeft = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
 
-  script$2h.render = render$2a;
-  script$2h.__file = "packages/components/DArrowLeft.vue";
-
-  var DArrowLeft = script$2h;
-
-  var script$2g = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "DArrowRight"
   });
-
   const _hoisted_1$1I = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1j = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1j = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"
+    d: "M452.864 149.312a29.12 29.12 0 0141.728.064L826.24 489.664a32 32 0 010 44.672L494.592 874.624a29.12 29.12 0 01-41.728 0 30.592 30.592 0 010-42.752L764.736 512 452.864 192a30.592 30.592 0 010-42.688zm-256 0a29.12 29.12 0 0141.728.064L570.24 489.664a32 32 0 010 44.672L238.592 874.624a29.12 29.12 0 01-41.728 0 30.592 30.592 0 010-42.752L508.736 512 196.864 192a30.592 30.592 0 010-42.688z"
   }, null, -1);
-  function render$29(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1I, [
-      _hoisted_2$1j
-    ]);
+  const _hoisted_3$16 = [
+    _hoisted_2$1j
+  ];
+  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1I, _hoisted_3$16);
   }
+  var dArrowRight = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
 
-  script$2g.render = render$29;
-  script$2g.__file = "packages/components/DArrowRight.vue";
-
-  var DArrowRight = script$2g;
-
-  var script$2f = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "Delete"
   });
-
   const _hoisted_1$1H = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1i = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1i = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"
+    d: "M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"
   }, null, -1);
-  function render$28(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1H, [
-      _hoisted_2$1i
-    ]);
+  const _hoisted_3$15 = [
+    _hoisted_2$1i
+  ];
+  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1H, _hoisted_3$15);
   }
+  var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
-  script$2f.render = render$28;
-  script$2f.__file = "packages/components/Delete.vue";
-
-  var Delete = script$2f;
-
-  var script$2e = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "Document"
   });
-
   const _hoisted_1$1G = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1h = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1h = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
+    d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
   }, null, -1);
-  function render$27(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1G, [
-      _hoisted_2$1h
-    ]);
+  const _hoisted_3$14 = [
+    _hoisted_2$1h
+  ];
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1G, _hoisted_3$14);
   }
+  var document$1 = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
-  script$2e.render = render$27;
-  script$2e.__file = "packages/components/Document.vue";
-
-  var Document = script$2e;
-
-  var script$2d = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "FullScreen"
   });
-
   const _hoisted_1$1F = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1g = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1g = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"
+    d: "M160 96.064l192 .192a32 32 0 010 64l-192-.192V352a32 32 0 01-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1164 0v191.936l192-.192a32 32 0 110 64l-192 .192zM864 96.064V96h64v256a32 32 0 11-64 0V160.064l-192 .192a32 32 0 110-64l192-.192zm0 831.872l-192-.192a32 32 0 010-64l192 .192V672a32 32 0 1164 0v256h-64v-.064z"
   }, null, -1);
-  function render$26(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1F, [
-      _hoisted_2$1g
-    ]);
+  const _hoisted_3$13 = [
+    _hoisted_2$1g
+  ];
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1F, _hoisted_3$13);
   }
+  var fullScreen = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
-  script$2d.render = render$26;
-  script$2d.__file = "packages/components/FullScreen.vue";
-
-  var FullScreen = script$2d;
-
-  var script$2c = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "InfoFilled"
   });
-
   const _hoisted_1$1E = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1f = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1f = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"
+    d: "M512 64a448 448 0 110 896.064A448 448 0 01512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 01-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 017.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"
   }, null, -1);
-  function render$25(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1E, [
-      _hoisted_2$1f
-    ]);
+  const _hoisted_3$12 = [
+    _hoisted_2$1f
+  ];
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1E, _hoisted_3$12);
   }
+  var infoFilled = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
-  script$2c.render = render$25;
-  script$2c.__file = "packages/components/InfoFilled.vue";
-
-  var InfoFilled = script$2c;
-
-  var script$2b = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     name: "Loading"
   });
-
   const _hoisted_1$1D = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1e = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1e = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
+    d: "M512 64a32 32 0 0132 32v192a32 32 0 01-64 0V96a32 32 0 0132-32zm0 640a32 32 0 0132 32v192a32 32 0 11-64 0V736a32 32 0 0132-32zm448-192a32 32 0 01-32 32H736a32 32 0 110-64h192a32 32 0 0132 32zm-640 0a32 32 0 01-32 32H96a32 32 0 010-64h192a32 32 0 0132 32zM195.2 195.2a32 32 0 0145.248 0L376.32 331.008a32 32 0 01-45.248 45.248L195.2 240.448a32 32 0 010-45.248zm452.544 452.544a32 32 0 0145.248 0L828.8 783.552a32 32 0 01-45.248 45.248L647.744 692.992a32 32 0 010-45.248zM828.8 195.264a32 32 0 010 45.184L692.992 376.32a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0zm-452.544 452.48a32 32 0 010 45.248L240.448 828.8a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0z"
   }, null, -1);
-  function render$24(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1D, [
-      _hoisted_2$1e
-    ]);
+  const _hoisted_3$11 = [
+    _hoisted_2$1e
+  ];
+  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1D, _hoisted_3$11);
   }
+  var loading = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
-  script$2b.render = render$24;
-  script$2b.__file = "packages/components/Loading.vue";
-
-  var Loading$2 = script$2b;
-
-  var script$2a = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "Minus"
   });
-
   const _hoisted_1$1C = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1d = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1d = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"
+    d: "M128 544h768a32 32 0 100-64H128a32 32 0 000 64z"
   }, null, -1);
-  function render$23(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1C, [
-      _hoisted_2$1d
-    ]);
+  const _hoisted_3$10 = [
+    _hoisted_2$1d
+  ];
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1C, _hoisted_3$10);
   }
+  var minus = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  script$2a.render = render$23;
-  script$2a.__file = "packages/components/Minus.vue";
-
-  var Minus = script$2a;
-
-  var script$29 = vue.defineComponent({
-    name: "More"
+  const _sfc_main$e = vue.defineComponent({
+    name: "MoreFilled"
   });
-
   const _hoisted_1$1B = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1c = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1c = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"
+    d: "M176 416a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224z"
   }, null, -1);
-  function render$22(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1B, [
-      _hoisted_2$1c
-    ]);
+  const _hoisted_3$$ = [
+    _hoisted_2$1c
+  ];
+  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1B, _hoisted_3$$);
   }
+  var moreFilled = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  script$29.render = render$22;
-  script$29.__file = "packages/components/More.vue";
-
-  var More = script$29;
-
-  var script$28 = vue.defineComponent({
-    name: "MoreFilled"
+  const _sfc_main$d = vue.defineComponent({
+    name: "More"
   });
-
   const _hoisted_1$1A = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1b = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1b = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224z"
+    d: "M176 416a112 112 0 100 224 112 112 0 000-224m0 64a48 48 0 110 96 48 48 0 010-96zm336-64a112 112 0 110 224 112 112 0 010-224zm0 64a48 48 0 100 96 48 48 0 000-96zm336-64a112 112 0 110 224 112 112 0 010-224zm0 64a48 48 0 100 96 48 48 0 000-96z"
   }, null, -1);
-  function render$21(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1A, [
-      _hoisted_2$1b
-    ]);
+  const _hoisted_3$_ = [
+    _hoisted_2$1b
+  ];
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1A, _hoisted_3$_);
   }
+  var more = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  script$28.render = render$21;
-  script$28.__file = "packages/components/MoreFilled.vue";
-
-  var MoreFilled = script$28;
-
-  var script$27 = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "Plus"
   });
-
   const _hoisted_1$1z = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1a = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$1a = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"
+    d: "M480 480V128a32 32 0 0164 0v352h352a32 32 0 110 64H544v352a32 32 0 11-64 0V544H128a32 32 0 010-64h352z"
   }, null, -1);
-  function render$20(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1z, [
-      _hoisted_2$1a
-    ]);
+  const _hoisted_3$Z = [
+    _hoisted_2$1a
+  ];
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1z, _hoisted_3$Z);
   }
+  var plus = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-  script$27.render = render$20;
-  script$27.__file = "packages/components/Plus.vue";
-
-  var Plus = script$27;
-
-  var script$26 = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "QuestionFilled"
   });
-
   const _hoisted_1$1y = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$19 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$19 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z"
+    d: "M512 64a448 448 0 110 896 448 448 0 010-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 00-38.72 14.784 49.408 49.408 0 00-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 00523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0016.192-38.72 51.968 51.968 0 00-15.488-38.016 55.936 55.936 0 00-39.424-14.784z"
   }, null, -1);
-  function render$1$(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1y, [
-      _hoisted_2$19
-    ]);
+  const _hoisted_3$Y = [
+    _hoisted_2$19
+  ];
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1y, _hoisted_3$Y);
   }
+  var questionFilled = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  script$26.render = render$1$;
-  script$26.__file = "packages/components/QuestionFilled.vue";
-
-  var QuestionFilled = script$26;
-
-  var script$25 = vue.defineComponent({
-    name: "RefreshRight"
+  const _sfc_main$a = vue.defineComponent({
+    name: "RefreshLeft"
   });
-
   const _hoisted_1$1x = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$18 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$18 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
+    d: "M289.088 296.704h92.992a32 32 0 010 64H232.96a32 32 0 01-32-32V179.712a32 32 0 0164 0v50.56a384 384 0 01643.84 282.88 384 384 0 01-383.936 384 384 384 0 01-384-384h64a320 320 0 10640 0 320 320 0 00-555.712-216.448z"
   }, null, -1);
-  function render$1_(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1x, [
-      _hoisted_2$18
-    ]);
+  const _hoisted_3$X = [
+    _hoisted_2$18
+  ];
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1x, _hoisted_3$X);
   }
+  var refreshLeft = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-  script$25.render = render$1_;
-  script$25.__file = "packages/components/RefreshRight.vue";
-
-  var RefreshRight = script$25;
-
-  var script$24 = vue.defineComponent({
-    name: "RefreshLeft"
+  const _sfc_main$9 = vue.defineComponent({
+    name: "RefreshRight"
   });
-
   const _hoisted_1$1w = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$17 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$17 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"
+    d: "M784.512 230.272v-50.56a32 32 0 1164 0v149.056a32 32 0 01-32 32H667.52a32 32 0 110-64h92.992A320 320 0 10524.8 833.152a320 320 0 00320-320h64a384 384 0 01-384 384 384 384 0 01-384-384 384 384 0 01643.712-282.88z"
   }, null, -1);
-  function render$1Z(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1w, [
-      _hoisted_2$17
-    ]);
+  const _hoisted_3$W = [
+    _hoisted_2$17
+  ];
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1w, _hoisted_3$W);
   }
+  var refreshRight = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
-  script$24.render = render$1Z;
-  script$24.__file = "packages/components/RefreshLeft.vue";
-
-  var RefreshLeft = script$24;
-
-  var script$23 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "ScaleToOriginal"
   });
-
   const _hoisted_1$1v = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$16 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$16 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z"
+    d: "M813.176 180.706a60.235 60.235 0 0160.236 60.235v481.883a60.235 60.235 0 01-60.236 60.235H210.824a60.235 60.235 0 01-60.236-60.235V240.94a60.235 60.235 0 0160.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0090.353 240.94v481.883a120.47 120.47 0 00120.47 120.47h602.353a120.47 120.47 0 00120.471-120.47V240.94a120.47 120.47 0 00-120.47-120.47zm-120.47 180.705a30.118 30.118 0 00-30.118 30.118v301.177a30.118 30.118 0 0060.236 0V331.294a30.118 30.118 0 00-30.118-30.118zm-361.412 0a30.118 30.118 0 00-30.118 30.118v301.177a30.118 30.118 0 1060.236 0V331.294a30.118 30.118 0 00-30.118-30.118zM512 361.412a30.118 30.118 0 00-30.118 30.117v30.118a30.118 30.118 0 0060.236 0V391.53A30.118 30.118 0 00512 361.412zM512 512a30.118 30.118 0 00-30.118 30.118v30.117a30.118 30.118 0 0060.236 0v-30.117A30.118 30.118 0 00512 512z"
   }, null, -1);
-  function render$1Y(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1v, [
-      _hoisted_2$16
-    ]);
+  const _hoisted_3$V = [
+    _hoisted_2$16
+  ];
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1v, _hoisted_3$V);
   }
+  var scaleToOriginal = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
-  script$23.render = render$1Y;
-  script$23.__file = "packages/components/ScaleToOriginal.vue";
-
-  var ScaleToOriginal = script$23;
-
-  var script$22 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     name: "Search"
   });
-
   const _hoisted_1$1u = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$15 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$15 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"
+    d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704z"
   }, null, -1);
-  function render$1X(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1u, [
-      _hoisted_2$15
-    ]);
+  const _hoisted_3$U = [
+    _hoisted_2$15
+  ];
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1u, _hoisted_3$U);
   }
+  var search = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 
-  script$22.render = render$1X;
-  script$22.__file = "packages/components/Search.vue";
-
-  var Search = script$22;
-
-  var script$21 = vue.defineComponent({
-    name: "Star"
+  const _sfc_main$6 = vue.defineComponent({
+    name: "StarFilled"
   });
-
   const _hoisted_1$1t = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$14 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$14 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"
+    d: "M283.84 867.84L512 747.776l228.16 119.936a6.4 6.4 0 009.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 00-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 00-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 00-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 009.28 6.72z"
   }, null, -1);
-  function render$1W(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1t, [
-      _hoisted_2$14
-    ]);
+  const _hoisted_3$T = [
+    _hoisted_2$14
+  ];
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1t, _hoisted_3$T);
   }
+  var starFilled = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 
-  script$21.render = render$1W;
-  script$21.__file = "packages/components/Star.vue";
-
-  var Star = script$21;
-
-  var script$20 = vue.defineComponent({
-    name: "StarFilled"
+  const _sfc_main$5 = vue.defineComponent({
+    name: "Star"
   });
-
   const _hoisted_1$1s = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$13 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$13 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"
+    d: "M512 747.84l228.16 119.936a6.4 6.4 0 009.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 00-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 00-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 00-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 009.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 01-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 01128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 01126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0139.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 01-102.144 74.24L512 820.096l-198.4 104.32z"
   }, null, -1);
-  function render$1V(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1s, [
-      _hoisted_2$13
-    ]);
+  const _hoisted_3$S = [
+    _hoisted_2$13
+  ];
+  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1s, _hoisted_3$S);
   }
+  var star = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 
-  script$20.render = render$1V;
-  script$20.__file = "packages/components/StarFilled.vue";
-
-  var StarFilled = script$20;
-
-  var script$1$ = vue.defineComponent({
+  const _sfc_main$4 = vue.defineComponent({
     name: "SuccessFilled"
   });
-
   const _hoisted_1$1r = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$12 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$12 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"
+    d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-55.808 536.384l-99.52-99.584a38.4 38.4 0 10-54.336 54.336l126.72 126.72a38.272 38.272 0 0054.336 0l262.4-262.464a38.4 38.4 0 10-54.272-54.336L456.192 600.384z"
   }, null, -1);
-  function render$1U(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1r, [
-      _hoisted_2$12
-    ]);
+  const _hoisted_3$R = [
+    _hoisted_2$12
+  ];
+  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1r, _hoisted_3$R);
   }
+  var successFilled = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
-  script$1$.render = render$1U;
-  script$1$.__file = "packages/components/SuccessFilled.vue";
-
-  var SuccessFilled = script$1$;
-
-  var script$1_ = vue.defineComponent({
+  const _sfc_main$3 = vue.defineComponent({
     name: "View"
   });
-
   const _hoisted_1$1q = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$11 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$11 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
+    d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
   }, null, -1);
-  function render$1T(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1q, [
-      _hoisted_2$11
-    ]);
+  const _hoisted_3$Q = [
+    _hoisted_2$11
+  ];
+  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1q, _hoisted_3$Q);
   }
+  var view = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
-  script$1_.render = render$1T;
-  script$1_.__file = "packages/components/View.vue";
-
-  var IconView = script$1_;
-
-  var script$1Z = vue.defineComponent({
+  const _sfc_main$2 = vue.defineComponent({
     name: "WarningFilled"
   });
-
   const _hoisted_1$1p = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$10 = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$10 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z"
+    d: "M512 64a448 448 0 110 896 448 448 0 010-896zm0 192a58.432 58.432 0 00-58.24 63.744l23.36 256.384a35.072 35.072 0 0069.76 0l23.296-256.384A58.432 58.432 0 00512 256zm0 512a51.2 51.2 0 100-102.4 51.2 51.2 0 000 102.4z"
   }, null, -1);
-  function render$1S(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1p, [
-      _hoisted_2$10
-    ]);
+  const _hoisted_3$P = [
+    _hoisted_2$10
+  ];
+  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1p, _hoisted_3$P);
   }
+  var warningFilled = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
-  script$1Z.render = render$1S;
-  script$1Z.__file = "packages/components/WarningFilled.vue";
-
-  var WarningFilled = script$1Z;
-
-  var script$1Y = vue.defineComponent({
+  const _sfc_main$1 = vue.defineComponent({
     name: "ZoomIn"
   });
-
   const _hoisted_1$1o = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$$ = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$$ = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
+    d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704zm-32-384v-96a32 32 0 0164 0v96h96a32 32 0 010 64h-96v96a32 32 0 01-64 0v-96h-96a32 32 0 010-64h96z"
   }, null, -1);
-  function render$1R(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1o, [
-      _hoisted_2$$
-    ]);
+  const _hoisted_3$O = [
+    _hoisted_2$$
+  ];
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1o, _hoisted_3$O);
   }
+  var zoomIn = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
-  script$1Y.render = render$1R;
-  script$1Y.__file = "packages/components/ZoomIn.vue";
-
-  var ZoomIn = script$1Y;
-
-  var script$1X = vue.defineComponent({
+  const _sfc_main = vue.defineComponent({
     name: "ZoomOut"
   });
-
   const _hoisted_1$1n = {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 1024 1024"
+    class: "icon",
+    width: "200",
+    height: "200",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$_ = /* @__PURE__ */ vue.createVNode("path", {
+  const _hoisted_2$_ = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
-    d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
+    d: "M795.904 750.72l124.992 124.928a32 32 0 01-45.248 45.248L750.656 795.904a416 416 0 1145.248-45.248zM480 832a352 352 0 100-704 352 352 0 000 704zM352 448h256a32 32 0 010 64H352a32 32 0 010-64z"
   }, null, -1);
-  function render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1n, [
-      _hoisted_2$_
-    ]);
+  const _hoisted_3$N = [
+    _hoisted_2$_
+  ];
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1n, _hoisted_3$N);
   }
-
-  script$1X.render = render$1Q;
-  script$1X.__file = "packages/components/ZoomOut.vue";
-
-  var ZoomOut = script$1X;
+  var zoomOut = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
   const CloseComponents = {
-    Close
+    Close: close$2
   };
   const TypeComponents = {
-    Close,
-    SuccessFilled,
-    InfoFilled,
-    WarningFilled,
-    CircleCloseFilled
+    Close: close$2,
+    SuccessFilled: successFilled,
+    InfoFilled: infoFilled,
+    WarningFilled: warningFilled,
+    CircleCloseFilled: circleCloseFilled
   };
   const TypeComponentsMap = {
-    success: SuccessFilled,
-    warning: WarningFilled,
-    error: CircleCloseFilled,
-    info: InfoFilled
+    success: successFilled,
+    warning: warningFilled,
+    error: circleCloseFilled,
+    info: infoFilled
   };
   const ValidateComponentsMap = {
-    validating: Loading$2,
-    success: CircleCheck,
-    error: CircleClose
+    validating: loading,
+    success: circleCheck,
+    error: circleClose
   };
 
   const alertProps = buildProps({
@@ -8327,7 +8317,8 @@
   }
 
   const inputProps = buildProps({
-    ...useFormItemProps,
+    size: useSizeProp,
+    disabled: Boolean,
     modelValue: {
       type: definePropType(void 0),
       default: ""
@@ -8415,16 +8406,16 @@
   };
   var script$1V = vue.defineComponent({
     name: "ElInput",
-    components: { ElIcon, CircleClose, IconView },
+    components: { ElIcon, CircleClose: circleClose, IconView: view },
     inheritAttrs: false,
     props: inputProps,
     emits: inputEmits,
     setup(props, { slots, emit, attrs: rawAttrs }) {
       const instance = vue.getCurrentInstance();
       const attrs = useAttrs();
-      const elForm = vue.inject(elFormKey, void 0);
-      const elFormItem = vue.inject(elFormItemKey, void 0);
-      const { size: inputSize, disabled: inputDisabled } = useFormItem({});
+      const { form, formItem } = useFormItem();
+      const inputSize = useSize();
+      const inputDisabled = useDisabled$1();
       const input = vue.ref();
       const textarea = vue.ref();
       const focused = vue.ref(false);
@@ -8435,9 +8426,9 @@
       const inputOrTextarea = vue.computed(() => input.value || textarea.value);
       const needStatusIcon = vue.computed(() => {
         var _a;
-        return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
+        return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
       });
-      const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
+      const validateState = vue.computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
       const validateIcon = vue.computed(() => ValidateComponentsMap[validateState.value]);
       const containerStyle = vue.computed(() => rawAttrs.style);
       const computedTextareaStyle = vue.computed(() => [
@@ -8524,7 +8515,7 @@
         focused.value = false;
         emit("blur", event);
         if (props.validateEvent) {
-          (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur");
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
         }
       };
       const select = () => {
@@ -8564,7 +8555,7 @@
         var _a;
         vue.nextTick(resizeTextarea);
         if (props.validateEvent) {
-          (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
         }
       });
       vue.watch(nativeInputValue, () => setNativeInputValue());
@@ -8856,14 +8847,14 @@
     always: Boolean
   });
 
-  const COMPONENT_NAME$8 = "Bar";
+  const COMPONENT_NAME$9 = "Bar";
   var script$1U = vue.defineComponent({
-    name: COMPONENT_NAME$8,
+    name: COMPONENT_NAME$9,
     props: barProps,
     setup(props) {
       const scrollbar = vue.inject(scrollbarContextKey);
       if (!scrollbar)
-        throwError(COMPONENT_NAME$8, "can not inject scrollbar context");
+        throwError(COMPONENT_NAME$9, "can not inject scrollbar context");
       const instance = vue.ref();
       const thumb = vue.ref();
       const barStore = vue.ref({});
@@ -9745,7 +9736,7 @@
       ElInput: ElInput$1,
       ElScrollbar: ElScrollbar$1,
       ElIcon: ElIcon$1,
-      Loading: Loading$2
+      Loading: loading
     },
     directives: {
       clickoutside: ClickOutside
@@ -10244,12 +10235,12 @@
     click: (evt) => evt instanceof MouseEvent
   };
 
-  const COMPONENT_NAME$7 = "ElBacktop";
+  const COMPONENT_NAME$8 = "ElBacktop";
   var script$1P = vue.defineComponent({
-    name: COMPONENT_NAME$7,
+    name: COMPONENT_NAME$8,
     components: {
       ElIcon,
-      CaretTop
+      CaretTop: caretTop
     },
     props: backtopProps,
     emits: backtopEmits,
@@ -10291,7 +10282,7 @@
         if (props.target) {
           el.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
           if (!el.value) {
-            throwError(COMPONENT_NAME$7, `target is not existed: ${props.target}`);
+            throwError(COMPONENT_NAME$8, `target is not existed: ${props.target}`);
           }
           container.value = el.value;
         }
@@ -10460,9 +10451,9 @@
     }
   });
 
-  const COMPONENT_NAME$6 = "ElBreadcrumbItem";
+  const COMPONENT_NAME$7 = "ElBreadcrumbItem";
   var script$1M = vue.defineComponent({
-    name: COMPONENT_NAME$6,
+    name: COMPONENT_NAME$7,
     components: {
       ElIcon: ElIcon$1
     },
@@ -10576,7 +10567,8 @@
   const buttonSize = ["", "large", "medium", "small", "mini"];
   const buttonNativeType = ["button", "submit", "reset"];
   const buttonProps = buildProps({
-    ...useFormItemProps,
+    size: useSizeProp,
+    disabled: Boolean,
     type: {
       type: String,
       values: buttonType,
@@ -10598,7 +10590,8 @@
     circle: Boolean,
     color: String,
     autoInsertSpace: {
-      type: Boolean
+      type: Boolean,
+      default: void 0
     }
   });
   const buttonEmits = {
@@ -10609,17 +10602,17 @@
     name: "ElButton",
     components: {
       ElIcon,
-      Loading: Loading$2
+      Loading: loading
     },
     props: buttonProps,
     emits: buttonEmits,
     setup(props, { emit, slots }) {
       const buttonRef = vue.ref();
       const buttonGroupContext = vue.inject(buttonGroupContextKey, void 0);
-      const globalConfig = useGlobalConfig();
+      const globalConfig = useGlobalConfig("button");
       const autoInsertSpace = vue.computed(() => {
-        var _a;
-        return (_a = props.autoInsertSpace) != null ? _a : globalConfig == null ? void 0 : globalConfig.button.autoInsertSpace;
+        var _a, _b, _c;
+        return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
       });
       const shouldAddSpace = vue.computed(() => {
         var _a;
@@ -10633,15 +10626,11 @@
         }
         return false;
       });
-      const {
-        form,
-        size: buttonSize,
-        disabled: buttonDisabled
-      } = useFormItem({
-        size: vue.computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size)
-      });
+      const { form } = useFormItem();
+      const buttonSize = useSize(vue.computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
+      const buttonDisabled = useDisabled$1();
       const buttonType = vue.computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "default");
-      const typeColor = useCssVar(`--el-color-${props.type}`);
+      const typeColor = vue.computed(() => useCssVar(`--el-color-${props.type}`).value);
       const buttonStyle = vue.computed(() => {
         let styles = {};
         const buttonColor = props.color || typeColor.value;
@@ -10774,7 +10763,7 @@
   const ElButton = withInstall(script$1L, {
     ButtonGroup: script$1K
   });
-  const ElButtonGroup$2 = withNoopInstall(script$1K);
+  const ElButtonGroup$1 = withNoopInstall(script$1K);
 
   var dayjs_min = {exports: {}};
 
@@ -10896,7 +10885,7 @@
     },
     clearIcon: {
       type: [String, Object],
-      default: CircleClose
+      default: circleClose
     },
     editable: {
       type: Boolean,
@@ -11019,7 +11008,6 @@
     props: timePickerDefaultProps,
     emits: ["update:modelValue", "change", "focus", "blur", "calendar-change"],
     setup(props, ctx) {
-      const ELEMENT = useGlobalConfig$1();
       const { lang } = useLocale();
       const elForm = vue.inject(elFormKey, {});
       const elFormItem = vue.inject(elFormItemKey, {});
@@ -11152,7 +11140,7 @@
       const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
       const isTimePicker = vue.computed(() => props.type.startsWith("time"));
       const isDatesPicker = vue.computed(() => props.type === "dates");
-      const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar));
+      const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock : calendar));
       const showClose = vue.ref(false);
       const onClearIconClick = (event) => {
         if (props.readonly || pickerDisabled.value)
@@ -11182,9 +11170,7 @@
       const isRangeInput = vue.computed(() => {
         return props.type.indexOf("range") > -1;
       });
-      const pickerSize = vue.computed(() => {
-        return props.size || elFormItem.size || ELEMENT.size;
-      });
+      const pickerSize = useSize();
       const popperPaneRef = vue.computed(() => {
         var _a;
         return (_a = refPopper.value) == null ? void 0 : _a.popperRef;
@@ -11249,8 +11235,8 @@
           }
           return;
         }
-        if (code === EVENT_CODE.enter) {
-          if (userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
+        if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
+          if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
             handleChange();
             pickerVisible.value = false;
           }
@@ -11573,8 +11559,8 @@
     components: {
       ElScrollbar: ElScrollbar$1,
       ElIcon: ElIcon$1,
-      ArrowUp,
-      ArrowDown
+      ArrowUp: arrowUp,
+      ArrowDown: arrowDown
     },
     props: {
       role: {
@@ -13071,9 +13057,7 @@
     }
   });
 
-  const rangeArr = (n) => {
-    return Array.from(Array(n).keys());
-  };
+  const rangeArr = (n) => Array.from(Array(n).keys());
   const extractDateFormat = (format) => {
     return format.replace(/\W?m{1,2}|\W?ZZ/g, "").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, "").trim();
   };
@@ -13087,87 +13071,52 @@
   };
   const ElTimePicker = _TimePicker;
 
+  const dateTableProps = buildProps({
+    selectedDay: {
+      type: definePropType(Object)
+    },
+    range: {
+      type: definePropType(Array)
+    },
+    date: {
+      type: definePropType(Object),
+      required: true
+    },
+    hideHeader: {
+      type: Boolean
+    }
+  });
+  const dateTableEmits = {
+    pick: (value) => isObject$a(value)
+  };
+
   dayjs.extend(localeData);
-  const getPrevMonthLastDays = (date, amount) => {
+  const WEEK_DAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+  const getPrevMonthLastDays = (date, count) => {
     const lastDay = date.subtract(1, "month").endOf("month").date();
-    return rangeArr(amount).map((_, index) => lastDay - (amount - index - 1));
+    return rangeArr(count).map((_, index) => lastDay - (count - index - 1));
   };
   const getMonthDays = (date) => {
     const days = date.daysInMonth();
     return rangeArr(days).map((_, index) => index + 1);
   };
+  const toNestedArr = (days) => rangeArr(days.length / 7).map((index) => {
+    const start = index * 7;
+    return days.slice(start, start + 7);
+  });
   var script$1F = vue.defineComponent({
-    props: {
-      selectedDay: {
-        type: Object
-      },
-      range: {
-        type: Array
-      },
-      date: {
-        type: Object
-      },
-      hideHeader: {
-        type: Boolean
-      }
-    },
-    emits: ["pick"],
-    setup(props, ctx) {
-      const { lang } = useLocale();
-      const WEEK_DAYS = vue.ref(dayjs().locale(lang.value).localeData().weekdaysShort());
+    props: dateTableProps,
+    emits: dateTableEmits,
+    setup(props, { emit }) {
+      const { t, lang } = useLocale();
       const now = dayjs().locale(lang.value);
       const firstDayOfWeek = now.$locale().weekStart || 0;
-      const toNestedArr = (days) => {
-        return rangeArr(days.length / 7).map((_, index) => {
-          const start = index * 7;
-          return days.slice(start, start + 7);
-        });
-      };
-      const getFormattedDate = (day, type) => {
-        let result;
-        if (type === "prev") {
-          result = props.date.startOf("month").subtract(1, "month").date(day);
-        } else if (type === "next") {
-          result = props.date.startOf("month").add(1, "month").date(day);
-        } else {
-          result = props.date.date(day);
-        }
-        return result;
-      };
-      const getCellClass = ({ text, type }) => {
-        const classes = [type];
-        if (type === "current") {
-          const date_ = getFormattedDate(text, type);
-          if (date_.isSame(props.selectedDay, "day")) {
-            classes.push("is-selected");
-          }
-          if (date_.isSame(now, "day")) {
-            classes.push("is-today");
-          }
-        }
-        return classes;
-      };
-      const pickDay = ({ text, type }) => {
-        const date = getFormattedDate(text, type);
-        ctx.emit("pick", date);
-      };
-      const getSlotData = ({ text, type }) => {
-        const day = getFormattedDate(text, type);
-        return {
-          isSelected: day.isSame(props.selectedDay),
-          type: `${type}-month`,
-          day: day.format("YYYY-MM-DD"),
-          date: day.toDate()
-        };
-      };
-      const isInRange = vue.computed(() => {
-        return props.range && props.range.length;
-      });
+      const isInRange = vue.computed(() => !!props.range && !!props.range.length);
       const rows = vue.computed(() => {
         let days = [];
         if (isInRange.value) {
           const [start, end] = props.range;
-          const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((_, index) => ({
+          const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((index) => ({
             text: start.date() + index,
             type: "current"
           }));
@@ -13200,17 +13149,53 @@
       const weekDays = vue.computed(() => {
         const start = firstDayOfWeek;
         if (start === 0) {
-          return WEEK_DAYS.value;
+          return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
         } else {
-          return WEEK_DAYS.value.slice(start).concat(WEEK_DAYS.value.slice(0, start));
+          return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start)).map((_) => t(`el.datepicker.weeks.${_}`));
         }
       });
+      const getFormattedDate = (day, type) => {
+        switch (type) {
+          case "prev":
+            return props.date.startOf("month").subtract(1, "month").date(day);
+          case "next":
+            return props.date.startOf("month").add(1, "month").date(day);
+          case "current":
+            return props.date.date(day);
+        }
+      };
+      const getCellClass = ({ text, type }) => {
+        const classes = [type];
+        if (type === "current") {
+          const date = getFormattedDate(text, type);
+          if (date.isSame(props.selectedDay, "day")) {
+            classes.push("is-selected");
+          }
+          if (date.isSame(now, "day")) {
+            classes.push("is-today");
+          }
+        }
+        return classes;
+      };
+      const handlePickDay = ({ text, type }) => {
+        const date = getFormattedDate(text, type);
+        emit("pick", date);
+      };
+      const getSlotData = ({ text, type }) => {
+        const day = getFormattedDate(text, type);
+        return {
+          isSelected: day.isSame(props.selectedDay),
+          type: `${type}-month`,
+          day: day.format("YYYY-MM-DD"),
+          date: day.toDate()
+        };
+      };
       return {
         isInRange,
         weekDays,
         rows,
         getCellClass,
-        pickDay,
+        handlePickDay,
         getSlotData
       };
     }
@@ -13246,7 +13231,7 @@
               return vue.openBlock(), vue.createElementBlock("td", {
                 key,
                 class: vue.normalizeClass(_ctx.getCellClass(cell)),
-                onClick: ($event) => _ctx.pickDay(cell)
+                onClick: ($event) => _ctx.handlePickDay(cell)
               }, [
                 vue.createElementVNode("div", _hoisted_3$H, [
                   vue.renderSlot(_ctx.$slots, "dateCell", {
@@ -13266,7 +13251,20 @@
   script$1F.render = render$1z;
   script$1F.__file = "packages/components/calendar/src/date-table.vue";
 
-  const { ButtonGroup: ElButtonGroup$1 } = ElButton;
+  const calendarProps = buildProps({
+    modelValue: {
+      type: Date
+    },
+    range: {
+      type: definePropType(Array),
+      validator: (range) => Array.isArray(range) && range.length === 2 && range.every((item) => item instanceof Date)
+    }
+  });
+  const calendarEmits = {
+    [UPDATE_MODEL_EVENT]: (value) => value instanceof Date,
+    input: (value) => value instanceof Date
+  };
+
   var script$1E = vue.defineComponent({
     name: "ElCalendar",
     components: {
@@ -13274,24 +13272,11 @@
       ElButton,
       ElButtonGroup: ElButtonGroup$1
     },
-    props: {
-      modelValue: {
-        type: Date
-      },
-      range: {
-        type: Array,
-        validator: (range) => {
-          if (Array.isArray(range)) {
-            return range.length === 2 && range.every((item) => item instanceof Date);
-          }
-          return false;
-        }
-      }
-    },
-    emits: ["input", "update:modelValue"],
-    setup(props, ctx) {
+    props: calendarProps,
+    emits: calendarEmits,
+    setup(props, { emit }) {
       const { t, lang } = useLocale();
-      const selectedDay = vue.ref(null);
+      const selectedDay = vue.ref();
       const now = dayjs().locale(lang.value);
       const prevMonthDayjs = vue.computed(() => {
         return date.value.subtract(1, "month");
@@ -13319,10 +13304,12 @@
           return date.value;
         },
         set(val) {
+          if (!val)
+            return;
           selectedDay.value = val;
           const result = val.toDate();
-          ctx.emit("input", result);
-          ctx.emit("update:modelValue", result);
+          emit("input", result);
+          emit("update:modelValue", result);
         }
       });
       const date = vue.computed(() => {
@@ -13515,13 +13502,9 @@
   }
 
   script$1E.render = render$1y;
-  script$1E.__file = "packages/components/calendar/src/index.vue";
+  script$1E.__file = "packages/components/calendar/src/calendar.vue";
 
-  script$1E.install = (app) => {
-    app.component(script$1E.name, script$1E);
-  };
-  const _Calendar = script$1E;
-  const ElCalendar = _Calendar;
+  const ElCalendar = withInstall(script$1E);
 
   const cardProps = buildProps({
     header: {
@@ -13646,8 +13629,8 @@
     name: "ElCarousel",
     components: {
       ElIcon,
-      ArrowLeft,
-      ArrowRight
+      ArrowLeft: arrowLeft,
+      ArrowRight: arrowRight
     },
     props: {
       initialIndex: {
@@ -14197,7 +14180,6 @@
     size: String
   };
   const useCheckboxGroup = () => {
-    const ELEMENT = useGlobalConfig$1();
     const elForm = vue.inject(elFormKey, {});
     const elFormItem = vue.inject(elFormItemKey, {});
     const checkboxGroup = vue.inject("CheckboxGroup", {});
@@ -14209,7 +14191,6 @@
       isGroup,
       checkboxGroup,
       elForm,
-      ELEMENT,
       elFormItemSize,
       elFormItem
     };
@@ -14219,14 +14200,10 @@
     const { emit } = vue.getCurrentInstance();
     const { isGroup, checkboxGroup } = useCheckboxGroup();
     const isLimitExceeded = vue.ref(false);
-    const store = vue.computed(() => {
-      var _a;
-      return checkboxGroup ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : props.modelValue;
-    });
     const model = vue.computed({
       get() {
-        var _a;
-        return isGroup.value ? store.value : (_a = props.modelValue) != null ? _a : selfModel.value;
+        var _a, _b;
+        return isGroup.value ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value;
       },
       set(val) {
         var _a;
@@ -14245,12 +14222,9 @@
     };
   };
   const useCheckboxStatus = (props, { model }) => {
-    const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup();
+    const { isGroup, checkboxGroup } = useCheckboxGroup();
     const focus = vue.ref(false);
-    const size = vue.computed(() => {
-      var _a;
-      return ((_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value) || elFormItemSize.value || ELEMENT.size;
-    });
+    const size = useSize(checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize, { prop: true });
     const isChecked = vue.computed(() => {
       const value = model.value;
       if (toTypeString(value) === "[object Boolean]") {
@@ -14263,11 +14237,10 @@
         return !!value;
       }
     });
-    const checkboxSize = vue.computed(() => {
+    const checkboxSize = useSize(vue.computed(() => {
       var _a;
-      const temCheckboxSize = props.size || elFormItemSize.value || ELEMENT.size;
-      return isGroup.value ? ((_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value) || temCheckboxSize : temCheckboxSize;
-    });
+      return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value : void 0;
+    }));
     return {
       isChecked,
       focus,
@@ -14587,8 +14560,8 @@
     },
     emits: [UPDATE_MODEL_EVENT, "change"],
     setup(props, ctx) {
-      const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup();
-      const checkboxGroupSize = vue.computed(() => props.size || elFormItemSize.value || ELEMENT.size);
+      const { elFormItem } = useCheckboxGroup();
+      const checkboxGroupSize = useSize();
       const changeEvent = (value) => {
         ctx.emit(UPDATE_MODEL_EVENT, value);
         vue.nextTick(() => {
@@ -14639,7 +14612,8 @@
   const ElCheckboxGroup$1 = withNoopInstall(script$1y);
 
   const radioPropsBase = buildProps({
-    ...useFormItemProps,
+    size: useSizeProp,
+    disabled: Boolean,
     label: {
       type: [String, Number, Boolean],
       default: ""
@@ -14678,10 +14652,8 @@
         radioRef.value.checked = props.modelValue === props.label;
       }
     });
-    const { size, disabled } = useFormItem({
-      size: vue.computed(() => radioGroup == null ? void 0 : radioGroup.size),
-      disabled: vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled)
-    });
+    const size = useSize(vue.computed(() => radioGroup == null ? void 0 : radioGroup.size));
+    const disabled = useDisabled$1(vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled));
     const focus = vue.ref(false);
     const tabIndex = vue.computed(() => {
       return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0;
@@ -14869,7 +14841,8 @@
   script$1w.__file = "packages/components/radio/src/radio-button.vue";
 
   const radioGroupProps = buildProps({
-    ...useFormItemProps,
+    size: useSizeProp,
+    disabled: Boolean,
     modelValue: {
       type: [String, Number, Boolean],
       default: ""
@@ -14891,7 +14864,7 @@
     emits: radioGroupEmits,
     setup(props, ctx) {
       const radioGroupRef = vue.ref();
-      const { size, disabled, formItem } = useFormItem({});
+      const { formItem } = useFormItem();
       const changeEvent = (value) => {
         ctx.emit(UPDATE_MODEL_EVENT, value);
         vue.nextTick(() => ctx.emit("change", value));
@@ -14938,8 +14911,6 @@
       }));
       vue.watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change"));
       return {
-        size,
-        disabled,
         radioGroupRef,
         handleKeydown
       };
@@ -14991,9 +14962,9 @@
       ElRadio,
       NodeContent,
       ElIcon: ElIcon$1,
-      Check,
-      Loading: Loading$2,
-      ArrowRight
+      Check: check,
+      Loading: loading,
+      ArrowRight: arrowRight
     },
     props: {
       node: {
@@ -15820,12 +15791,11 @@
 
   var script$1r = vue.defineComponent({
     name: "ElTag",
-    components: { ElIcon: ElIcon$1, Close },
+    components: { ElIcon: ElIcon$1, Close: close$2 },
     props: tagProps,
     emits: tagEmits,
     setup(props, { emit }) {
-      const ELEMENT = useGlobalConfig$1();
-      const tagSize = vue.computed(() => props.size || ELEMENT.size);
+      const tagSize = useSize();
       const classes = vue.computed(() => {
         const { type, hit, effect } = props;
         return [
@@ -15934,9 +15904,9 @@
       ElScrollbar: ElScrollbar$1,
       ElTag,
       ElIcon: ElIcon$1,
-      CircleClose,
-      Check,
-      ArrowDown
+      CircleClose: circleClose,
+      Check: check,
+      ArrowDown: arrowDown
     },
     directives: {
       Clickoutside: ClickOutside
@@ -15996,7 +15966,6 @@
       let inputInitialHeight = 0;
       let pressDeleteCount = 0;
       const { t } = useLocale();
-      const $ELEMENT = useGlobalConfig$1();
       const elForm = vue.inject(elFormKey, {});
       const elFormItem = vue.inject(elFormItemKey, {});
       const popper = vue.ref(null);
@@ -16014,7 +15983,7 @@
       const isOnComposition = vue.ref(false);
       const isDisabled = vue.computed(() => props.disabled || elForm.disabled);
       const inputPlaceholder = vue.computed(() => props.placeholder || t("el.cascader.placeholder"));
-      const realSize = vue.computed(() => props.size || elFormItem.size || $ELEMENT.size);
+      const realSize = useSize();
       const tagSize = vue.computed(() => ["small", "mini"].includes(realSize.value) ? "mini" : "small");
       const multiple = vue.computed(() => !!props.props.multiple);
       const readonly = vue.computed(() => !props.filterable || multiple.value);
@@ -16800,7 +16769,7 @@
 
   var script$1m = vue.defineComponent({
     name: "ElCollapseItem",
-    components: { ElCollapseTransition: _CollapseTransition, ElIcon: ElIcon$1, ArrowRight },
+    components: { ElCollapseTransition: _CollapseTransition, ElIcon: ElIcon$1, ArrowRight: arrowRight },
     props: {
       title: {
         type: String,
@@ -17654,8 +17623,8 @@
       ElPopper,
       ElInput: ElInput$1,
       ElIcon: ElIcon$1,
-      Close,
-      ArrowDown,
+      Close: close$2,
+      ArrowDown: arrowDown,
       SvPanel: script$1i,
       HueSlider: script$1k,
       AlphaSlider: script$1l,
@@ -17678,7 +17647,6 @@
     },
     emits: ["change", "active-change", UPDATE_MODEL_EVENT],
     setup(props, { emit }) {
-      const ELEMENT = useGlobalConfig$1();
       const { t } = useLocale();
       const elForm = vue.inject(elFormKey, {});
       const elFormItem = vue.inject(elFormItemKey, {});
@@ -17699,9 +17667,7 @@
         }
         return displayedRgb(color, props.showAlpha);
       });
-      const colorSize = vue.computed(() => {
-        return props.size || elFormItem.size || ELEMENT.size;
-      });
+      const colorSize = useSize();
       const colorDisabled = vue.computed(() => {
         return props.disabled || elForm.disabled;
       });
@@ -17977,17 +17943,16 @@
   const _ColorPicker = script$1h;
   const ElColorPicker = _ColorPicker;
 
-  const configProviderProps = {
+  const configProviderProps = buildProps({
     ...useLocaleProps,
-    button: buildProp({
-      type: definePropType(Object),
-      default: () => {
-        return mutable({
-          autoInsertSpace: true
-        });
-      }
-    })
-  };
+    size: {
+      type: String,
+      values: ["large", "medium", "small", "mini"]
+    },
+    button: {
+      type: definePropType(Object)
+    }
+  });
 
   const ConfigProvider = vue.defineComponent({
     name: "ElConfigProvider",
@@ -18899,10 +18864,10 @@
       TimePickPanel: script$1H,
       MonthTable: script$1a,
       YearTable: script$19,
-      DArrowLeft,
-      ArrowLeft,
-      DArrowRight,
-      ArrowRight
+      DArrowLeft: dArrowLeft,
+      ArrowLeft: arrowLeft,
+      DArrowRight: dArrowRight,
+      ArrowRight: arrowRight
     },
     directives: { clickoutside: ClickOutside },
     props: {
@@ -19511,10 +19476,10 @@
       ElInput: ElInput$1,
       ElButton,
       ElIcon: ElIcon$1,
-      DArrowLeft,
-      ArrowLeft,
-      DArrowRight,
-      ArrowRight
+      DArrowLeft: dArrowLeft,
+      ArrowLeft: arrowLeft,
+      DArrowRight: dArrowRight,
+      ArrowRight: arrowRight
     },
     props: {
       unlinkPanels: Boolean,
@@ -20235,7 +20200,7 @@
   script$17.__file = "packages/components/date-picker/src/date-picker-com/panel-date-range.vue";
 
   var script$16 = vue.defineComponent({
-    components: { MonthTable: script$1a, ElIcon: ElIcon$1, DArrowLeft, DArrowRight },
+    components: { MonthTable: script$1a, ElIcon: ElIcon$1, DArrowLeft: dArrowLeft, DArrowRight: dArrowRight },
     props: {
       unlinkPanels: Boolean,
       parsedValue: {
@@ -20770,10 +20735,7 @@
     },
     setup(props, { slots }) {
       vue.provide(elDescriptionsKey, props);
-      const $ELEMENT = useGlobalConfig$1();
-      const descriptionsSize = vue.computed(() => {
-        return props.size || $ELEMENT.size;
-      });
+      const descriptionsSize = useSize();
       const flattedChildren = (children) => {
         const temp = Array.isArray(children) ? children : [children];
         const res = [];
@@ -21007,6 +20969,10 @@
       type: String,
       default: ""
     },
+    closeIcon: {
+      type: definePropType([String, Object]),
+      default: ""
+    },
     closeOnClickModal: {
       type: Boolean,
       default: true
@@ -21186,6 +21152,8 @@
       beforeLeave,
       handleClose,
       onModalClick,
+      close,
+      doClose,
       closed,
       style,
       rendered,
@@ -21230,7 +21198,6 @@
     class: "el-dialog__footer"
   };
   function render$Z(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_close = vue.resolveComponent("close");
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_el_overlay = vue.resolveComponent("el-overlay");
     const _directive_trap_focus = vue.resolveDirective("trap-focus");
@@ -21288,7 +21255,7 @@
                     }, [
                       vue.createVNode(_component_el_icon, { class: "el-dialog__close" }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_component_close)
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || "close")))
                         ]),
                         _: 1
                       })
@@ -21330,6 +21297,10 @@
       type: String,
       values: ["left", "center", "right"],
       default: "center"
+    },
+    borderStyle: {
+      type: definePropType(String),
+      default: "solid"
     }
   });
 
@@ -21340,7 +21311,8 @@
 
   function render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
-      class: vue.normalizeClass(["el-divider", `el-divider--${_ctx.direction}`])
+      class: vue.normalizeClass(["el-divider", `el-divider--${_ctx.direction}`]),
+      style: vue.normalizeStyle({ "--el-border-style": _ctx.borderStyle })
     }, [
       _ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
@@ -21348,7 +21320,7 @@
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 2)) : vue.createCommentVNode("v-if", true)
-    ], 2);
+    ], 6);
   }
 
   script$12.render = render$Y;
@@ -21356,46 +21328,49 @@
 
   const ElDivider = withInstall(script$12);
 
+  const drawerProps = buildProps({
+    ...dialogProps,
+    direction: {
+      type: String,
+      default: "rtl",
+      values: ["ltr", "rtl", "ttb", "btt"]
+    },
+    size: {
+      type: [String, Number],
+      default: "30%"
+    },
+    withHeader: {
+      type: Boolean,
+      default: true
+    },
+    modalFade: {
+      type: Boolean,
+      default: true
+    }
+  });
+  const drawerEmits = dialogEmits;
+
   var script$11 = vue.defineComponent({
     name: "ElDrawer",
     components: {
       ElOverlay,
       ElIcon: ElIcon$1,
-      Close
+      Close: close$2
     },
     directives: {
       TrapFocus
     },
-    props: {
-      ...dialogProps,
-      direction: {
-        type: String,
-        default: "rtl",
-        validator: (val) => {
-          return ["ltr", "rtl", "ttb", "btt"].indexOf(val) !== -1;
-        }
-      },
-      size: {
-        type: [String, Number],
-        default: "30%"
-      },
-      withHeader: {
-        type: Boolean,
-        default: true
-      },
-      modalFade: {
-        type: Boolean,
-        default: true
-      }
-    },
-    emits: dialogEmits,
+    props: drawerProps,
+    emits: drawerEmits,
     setup(props, ctx) {
-      const drawerRef = vue.ref(null);
+      const drawerRef = vue.ref();
+      const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
+      const drawerSize = vue.computed(() => typeof props.size === "number" ? `${props.size}px` : props.size);
       return {
         ...useDialog(props, ctx, drawerRef),
         drawerRef,
-        isHorizontal: vue.computed(() => props.direction === "rtl" || props.direction === "ltr"),
-        drawerSize: vue.computed(() => typeof props.size === "number" ? `${props.size}px` : props.size)
+        isHorizontal,
+        drawerSize
       };
     }
   });
@@ -21486,108 +21461,9 @@
   }
 
   script$11.render = render$X;
-  script$11.__file = "packages/components/drawer/src/index.vue";
+  script$11.__file = "packages/components/drawer/src/drawer.vue";
 
-  script$11.install = (app) => {
-    app.component(script$11.name, script$11);
-  };
-  const _Drawer = script$11;
-  const ElDrawer = _Drawer;
-
-  const useDropdown = () => {
-    const ELEMENT = useGlobalConfig$1();
-    const elDropdown = vue.inject("elDropdown", {});
-    const _elDropdownSize = vue.computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
-    return {
-      ELEMENT,
-      elDropdown,
-      _elDropdownSize
-    };
-  };
-  const initDropdownDomEvent = (dropdownChildren, triggerElm, _instance) => {
-    const menuItems = vue.ref(null);
-    const menuItemsArray = vue.ref(null);
-    const dropdownElm = vue.ref(null);
-    const listId = vue.ref(`dropdown-menu-${generateId()}`);
-    dropdownElm.value = dropdownChildren == null ? void 0 : dropdownChildren.subTree.el;
-    function removeTabindex() {
-      var _a;
-      triggerElm.setAttribute("tabindex", "-1");
-      (_a = menuItemsArray.value) == null ? void 0 : _a.forEach((item) => {
-        item.setAttribute("tabindex", "-1");
-      });
-    }
-    function resetTabindex(ele) {
-      removeTabindex();
-      ele == null ? void 0 : ele.setAttribute("tabindex", "0");
-    }
-    function handleTriggerKeyDown(ev) {
-      const code = ev.code;
-      if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
-        removeTabindex();
-        resetTabindex(menuItems.value[0]);
-        menuItems.value[0].focus();
-        ev.preventDefault();
-        ev.stopPropagation();
-      } else if (code === EVENT_CODE.enter) {
-        _instance.handleClick();
-      } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
-        _instance.hide();
-      }
-    }
-    function handleItemKeyDown(ev) {
-      const code = ev.code;
-      const target = ev.target;
-      const currentIndex = menuItemsArray.value.indexOf(target);
-      const max = menuItemsArray.value.length - 1;
-      let nextIndex;
-      if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
-        if (code === EVENT_CODE.up) {
-          nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
-        } else {
-          nextIndex = currentIndex < max ? currentIndex + 1 : max;
-        }
-        removeTabindex();
-        resetTabindex(menuItems.value[nextIndex]);
-        menuItems.value[nextIndex].focus();
-        ev.preventDefault();
-        ev.stopPropagation();
-      } else if (code === EVENT_CODE.enter) {
-        triggerElmFocus();
-        target.click();
-        if (_instance.props.hideOnClick) {
-          _instance.hide();
-        }
-      } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
-        _instance.hide();
-        triggerElmFocus();
-      }
-    }
-    function initAria() {
-      dropdownElm.value.setAttribute("id", listId.value);
-      triggerElm.setAttribute("aria-haspopup", "list");
-      triggerElm.setAttribute("aria-controls", listId.value);
-      if (!_instance.props.splitButton) {
-        triggerElm.setAttribute("role", "button");
-        triggerElm.setAttribute("tabindex", _instance.props.tabindex);
-        addClass(triggerElm, "el-dropdown-selfdefine");
-      }
-    }
-    function initEvent() {
-      on(triggerElm, "keydown", handleTriggerKeyDown);
-      on(dropdownElm.value, "keydown", handleItemKeyDown, true);
-    }
-    function initDomOperation() {
-      menuItems.value = dropdownElm.value.querySelectorAll("[tabindex='-1']");
-      menuItemsArray.value = [].slice.call(menuItems.value);
-      initEvent();
-      initAria();
-    }
-    function triggerElmFocus() {
-      triggerElm.focus();
-    }
-    initDomOperation();
-  };
+  const ElDrawer = withInstall(script$11);
 
   const { ButtonGroup: ElButtonGroup } = ElButton;
   var script$10 = vue.defineComponent({
@@ -21598,7 +21474,7 @@
       ElScrollbar: ElScrollbar$1,
       ElPopper,
       ElIcon: ElIcon$1,
-      ArrowDown
+      ArrowDown: arrowDown
     },
     props: {
       trigger: {
@@ -21643,7 +21519,6 @@
     emits: ["visible-change", "click", "command"],
     setup(props, { emit }) {
       const _instance = vue.getCurrentInstance();
-      const { ELEMENT } = useDropdown();
       const timeout = vue.ref(null);
       const visible = vue.ref(false);
       const scrollbar = vue.ref(null);
@@ -21722,7 +21597,7 @@
         var _a, _b;
         (_b = (_a = triggerElm.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
       }
-      const dropdownSize = vue.computed(() => props.size || ELEMENT.size);
+      const dropdownSize = useSize();
       function commandHandler(...args) {
         emit("command", ...args);
       }
@@ -21864,6 +21739,99 @@
   script$10.render = render$W;
   script$10.__file = "packages/components/dropdown/src/dropdown.vue";
 
+  const useDropdown = () => {
+    const elDropdown = vue.inject("elDropdown", {});
+    const _elDropdownSize = vue.computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
+    return {
+      elDropdown,
+      _elDropdownSize
+    };
+  };
+  const initDropdownDomEvent = (dropdownChildren, triggerElm, _instance) => {
+    const menuItems = vue.ref(null);
+    const menuItemsArray = vue.ref(null);
+    const dropdownElm = vue.ref(null);
+    const listId = vue.ref(`dropdown-menu-${generateId()}`);
+    dropdownElm.value = dropdownChildren == null ? void 0 : dropdownChildren.subTree.el;
+    function removeTabindex() {
+      var _a;
+      triggerElm.setAttribute("tabindex", "-1");
+      (_a = menuItemsArray.value) == null ? void 0 : _a.forEach((item) => {
+        item.setAttribute("tabindex", "-1");
+      });
+    }
+    function resetTabindex(ele) {
+      removeTabindex();
+      ele == null ? void 0 : ele.setAttribute("tabindex", "0");
+    }
+    function handleTriggerKeyDown(ev) {
+      const code = ev.code;
+      if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
+        removeTabindex();
+        resetTabindex(menuItems.value[0]);
+        menuItems.value[0].focus();
+        ev.preventDefault();
+        ev.stopPropagation();
+      } else if (code === EVENT_CODE.enter) {
+        _instance.handleClick();
+      } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
+        _instance.hide();
+      }
+    }
+    function handleItemKeyDown(ev) {
+      const code = ev.code;
+      const target = ev.target;
+      const currentIndex = menuItemsArray.value.indexOf(target);
+      const max = menuItemsArray.value.length - 1;
+      let nextIndex;
+      if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
+        if (code === EVENT_CODE.up) {
+          nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+        } else {
+          nextIndex = currentIndex < max ? currentIndex + 1 : max;
+        }
+        removeTabindex();
+        resetTabindex(menuItems.value[nextIndex]);
+        menuItems.value[nextIndex].focus();
+        ev.preventDefault();
+        ev.stopPropagation();
+      } else if (code === EVENT_CODE.enter) {
+        triggerElmFocus();
+        target.click();
+        if (_instance.props.hideOnClick) {
+          _instance.hide();
+        }
+      } else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
+        _instance.hide();
+        triggerElmFocus();
+      }
+    }
+    function initAria() {
+      dropdownElm.value.setAttribute("id", listId.value);
+      triggerElm.setAttribute("aria-haspopup", "list");
+      triggerElm.setAttribute("aria-controls", listId.value);
+      if (!_instance.props.splitButton) {
+        triggerElm.setAttribute("role", "button");
+        triggerElm.setAttribute("tabindex", _instance.props.tabindex);
+        addClass(triggerElm, "el-dropdown-selfdefine");
+      }
+    }
+    function initEvent() {
+      on(triggerElm, "keydown", handleTriggerKeyDown);
+      on(dropdownElm.value, "keydown", handleItemKeyDown, true);
+    }
+    function initDomOperation() {
+      menuItems.value = dropdownElm.value.querySelectorAll("[tabindex='-1']");
+      menuItemsArray.value = [].slice.call(menuItems.value);
+      initEvent();
+      initAria();
+    }
+    function triggerElmFocus() {
+      triggerElm.focus();
+    }
+    initDomOperation();
+  };
+
   var script$$ = vue.defineComponent({
     name: "ElDropdownItem",
     components: { ElIcon: ElIcon$1 },
@@ -23809,7 +23777,6 @@
       }
     },
     setup(props, { slots }) {
-      const $ELEMENT = useGlobalConfig$1();
       const elForm = vue.inject(elFormKey, {});
       const validateState = vue.ref("");
       const validateMessage = vue.ref("");
@@ -23887,10 +23854,7 @@
         }
         return required;
       });
-      const elFormItemSize = vue.computed(() => props.size || elForm.size);
-      const sizeClass = vue.computed(() => {
-        return elFormItemSize.value || $ELEMENT.size;
-      });
+      const sizeClass = useSize(void 0, { formItem: false });
       const validate = (trigger, callback = NOOP) => {
         if (!isValidationEnabled.value) {
           callback();
@@ -24109,11 +24073,11 @@
   const Mode = {
     CONTAIN: {
       name: "contain",
-      icon: vue.markRaw(FullScreen)
+      icon: vue.markRaw(fullScreen)
     },
     ORIGINAL: {
       name: "original",
-      icon: vue.markRaw(ScaleToOriginal)
+      icon: vue.markRaw(scaleToOriginal)
     }
   };
   const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
@@ -24121,13 +24085,13 @@
     name: "ElImageViewer",
     components: {
       ElIcon: ElIcon$1,
-      Close,
-      ArrowLeft,
-      ArrowRight,
-      ZoomOut,
-      ZoomIn,
-      RefreshLeft,
-      RefreshRight
+      Close: close$2,
+      ArrowLeft: arrowLeft,
+      ArrowRight: arrowRight,
+      ZoomOut: zoomOut,
+      ZoomIn: zoomIn,
+      RefreshLeft: refreshLeft,
+      RefreshRight: refreshRight
     },
     props: imageViewerProps,
     emits: imageViewerEmits,
@@ -24817,10 +24781,10 @@
     components: {
       ElInput: ElInput$1,
       ElIcon,
-      ArrowUp,
-      ArrowDown,
-      Plus,
-      Minus
+      ArrowUp: arrowUp,
+      ArrowDown: arrowDown,
+      Plus: plus,
+      Minus: minus
     },
     directives: {
       RepeatClick
@@ -24847,7 +24811,8 @@
       const controlsAtRight = vue.computed(() => {
         return props.controls && props.controlsPosition === "right";
       });
-      const { size: inputNumberSize, disabled: inputNumberDisabled } = useFormItem({});
+      const inputNumberSize = useSize();
+      const inputNumberDisabled = useDisabled$1();
       const displayValue = vue.computed(() => {
         if (data.userInput !== null) {
           return data.userInput;
@@ -24958,11 +24923,11 @@
             newVal = toPrecision(newVal, props.precision);
           }
         }
-        if (newVal !== void 0 && newVal >= props.max) {
+        if (newVal !== void 0 && newVal > props.max) {
           newVal = props.max;
           emit("update:modelValue", newVal);
         }
-        if (newVal !== void 0 && newVal <= props.min) {
+        if (newVal !== void 0 && newVal < props.min) {
           newVal = props.min;
           emit("update:modelValue", newVal);
         }
@@ -25056,6 +25021,7 @@
       vue.createVNode(_component_el_input, {
         ref: "input",
         type: "number",
+        step: _ctx.step,
         "model-value": _ctx.displayValue,
         placeholder: _ctx.placeholder,
         disabled: _ctx.inputNumberDisabled,
@@ -25072,7 +25038,7 @@
         onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
         onInput: _ctx.handleInput,
         onChange: _ctx.handleInputChange
-      }, null, 8, ["model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onInput", "onChange"])
+      }, null, 8, ["step", "model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onInput", "onChange"])
     ], 34);
   }
 
@@ -25420,19 +25386,19 @@
       default: void 0
     }
   });
-  const COMPONENT_NAME$5 = "ElSubMenu";
+  const COMPONENT_NAME$6 = "ElSubMenu";
   var SubMenu = vue.defineComponent({
-    name: COMPONENT_NAME$5,
+    name: COMPONENT_NAME$6,
     props: subMenuProps,
     setup(props, { slots, expose }) {
       const instance = vue.getCurrentInstance();
       const { paddingStyle, indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
       const rootMenu = vue.inject("rootMenu");
       if (!rootMenu)
-        throwError(COMPONENT_NAME$5, "can not inject root menu");
+        throwError(COMPONENT_NAME$6, "can not inject root menu");
       const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
       if (!subMenu)
-        throwError(COMPONENT_NAME$5, "can not inject sub menu");
+        throwError(COMPONENT_NAME$6, "can not inject sub menu");
       const items = vue.ref({});
       const subMenus = vue.ref({});
       let timeout;
@@ -25441,7 +25407,7 @@
       const verticalTitleRef = vue.ref();
       const vPopper = vue.ref();
       const subMenuTitleIcon = vue.computed(() => {
-        return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? ArrowDown : ArrowRight;
+        return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? arrowDown : arrowRight;
       });
       const isFirstLevel = vue.computed(() => {
         let isFirstLevel2 = true;
@@ -25917,7 +25883,7 @@
             }, {
               title: () => vue.h(ElIcon$1, {
                 class: ["el-sub-menu__icon-more"]
-              }, { default: () => vue.h(More) }),
+              }, { default: () => vue.h(more) }),
               default: () => slotMore
             }));
           }
@@ -26002,7 +25968,8 @@
         showAfter,
         visibleArrow,
         modelValue,
-        tabindex
+        tabindex,
+        fallbackPlacements
       } = this;
       const throwErrorTip = () => {
         throwError("[ElTooltip]", "you need to provide a valid default slot.");
@@ -26016,7 +25983,8 @@
         showAfter: openDelay || showAfter,
         showArrow: visibleArrow,
         visible: modelValue,
-        "onUpdate:visible": onUpdateVisible
+        "onUpdate:visible": onUpdateVisible,
+        fallbackPlacements: fallbackPlacements.length ? fallbackPlacements : ["bottom-start", "top-start", "right", "left"]
       }, {
         default: () => $slots.content ? $slots.content() : content,
         trigger: () => {
@@ -26053,9 +26021,9 @@
     click: (item) => isString$1(item.index) && Array.isArray(item.indexPath)
   };
 
-  const COMPONENT_NAME$4 = "ElMenuItem";
+  const COMPONENT_NAME$5 = "ElMenuItem";
   var script$Q = vue.defineComponent({
-    name: COMPONENT_NAME$4,
+    name: COMPONENT_NAME$5,
     components: {
       ElTooltip: _Tooltip
     },
@@ -26065,11 +26033,11 @@
       const instance = vue.getCurrentInstance();
       const rootMenu = vue.inject("rootMenu");
       if (!rootMenu)
-        throwError(COMPONENT_NAME$4, "can not inject root menu");
+        throwError(COMPONENT_NAME$5, "can not inject root menu");
       const { parentMenu, paddingStyle, indexPath } = useMenu(instance, vue.toRef(props, "index"));
       const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
       if (!subMenu)
-        throwError(COMPONENT_NAME$4, "can not inject sub menu");
+        throwError(COMPONENT_NAME$5, "can not inject sub menu");
       const active = vue.computed(() => props.index === rootMenu.activeIndex);
       const item = vue.reactive({
         index: props.index,
@@ -26155,15 +26123,15 @@
     title: String
   };
 
-  const COMPONENT_NAME$3 = "ElMenuItemGroup";
+  const COMPONENT_NAME$4 = "ElMenuItemGroup";
   var script$P = vue.defineComponent({
-    name: COMPONENT_NAME$3,
+    name: COMPONENT_NAME$4,
     props: menuItemGroupProps,
     setup() {
       const instance = vue.getCurrentInstance();
       const menu = vue.inject("rootMenu");
       if (!menu)
-        throwError(COMPONENT_NAME$3, "can not inject root menu");
+        throwError(COMPONENT_NAME$4, "can not inject root menu");
       const levelPadding = vue.computed(() => {
         if (menu.props.collapse)
           return 20;
@@ -26215,7 +26183,7 @@
   const pageHeaderProps = {
     icon: {
       type: [String, Object],
-      default: Back
+      default: back
     },
     title: String,
     content: {
@@ -26304,7 +26272,7 @@
     name: "ElPaginationPrev",
     components: {
       ElIcon,
-      ArrowLeft
+      ArrowLeft: arrowLeft
     },
     props: paginationPrevProps,
     emits: ["click"],
@@ -26359,7 +26327,7 @@
     name: "ElPaginationNext",
     components: {
       ElIcon,
-      ArrowRight
+      ArrowRight: arrowRight
     },
     props: paginationNextProps,
     emits: ["click"],
@@ -26637,7 +26605,6 @@
     });
   }
   const useSelect$2 = (props, states, ctx) => {
-    const ELEMENT = useGlobalConfig$1();
     const { t } = useLocale();
     const reference = vue.ref(null);
     const input = vue.ref(null);
@@ -26685,7 +26652,7 @@
       });
       return props.filterable && props.allowCreate && states.query !== "" && !hasExistingOption;
     });
-    const selectSize = vue.computed(() => props.size || elFormItem.size || ELEMENT.size);
+    const selectSize = useSize();
     const collapseTagSize = vue.computed(() => ["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small");
     const dropMenuVisible = vue.computed(() => states.visible && emptyText.value !== false);
     vue.watch(() => selectDisabled.value, () => {
@@ -27321,7 +27288,7 @@
       },
       clearIcon: {
         type: [String, Object],
-        default: CircleClose
+        default: circleClose
       },
       fitInputWidth: {
         type: Boolean,
@@ -27329,7 +27296,11 @@
       },
       suffixIcon: {
         type: [String, Object],
-        default: ArrowUp
+        default: arrowUp
+      },
+      tagType: {
+        type: String,
+        default: "info"
       }
     },
     emits: [
@@ -27594,7 +27565,7 @@
                   closable: !_ctx.selectDisabled && !_ctx.selected[0].isDisabled,
                   size: _ctx.collapseTagSize,
                   hit: _ctx.selected[0].hitState,
-                  type: "info",
+                  type: _ctx.tagType,
                   "disable-transitions": "",
                   onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.selected[0]))
                 }, {
@@ -27605,19 +27576,19 @@
                     }, vue.toDisplayString(_ctx.selected[0].currentLabel), 5)
                   ]),
                   _: 1
-                }, 8, ["closable", "size", "hit"]),
+                }, 8, ["closable", "size", "hit", "type"]),
                 _ctx.selected.length > 1 ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
                   key: 0,
                   closable: false,
                   size: _ctx.collapseTagSize,
-                  type: "info",
+                  type: _ctx.tagType,
                   "disable-transitions": ""
                 }, {
                   default: vue.withCtx(() => [
                     vue.createElementVNode("span", _hoisted_3$k, "+ " + vue.toDisplayString(_ctx.selected.length - 1), 1)
                   ]),
                   _: 1
-                }, 8, ["size"])) : vue.createCommentVNode("v-if", true)
+                }, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
               ])) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" <div> "),
               !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -27636,7 +27607,7 @@
                         closable: !_ctx.selectDisabled && !item.isDisabled,
                         size: _ctx.collapseTagSize,
                         hit: item.hitState,
-                        type: "info",
+                        type: _ctx.tagType,
                         "disable-transitions": "",
                         onClose: ($event) => _ctx.deleteTag($event, item)
                       }, {
@@ -27647,7 +27618,7 @@
                           }, vue.toDisplayString(item.currentLabel), 5)
                         ]),
                         _: 2
-                      }, 1032, ["closable", "size", "hit", "onClose"]);
+                      }, 1032, ["closable", "size", "hit", "type", "onClose"]);
                     }), 128))
                   ], 4)
                 ]),
@@ -28053,9 +28024,9 @@
   var script$E = vue.defineComponent({
     name: "ElPaginationPager",
     components: {
-      DArrowLeft,
-      DArrowRight,
-      MoreFilled
+      DArrowLeft: dArrowLeft,
+      DArrowRight: dArrowRight,
+      MoreFilled: moreFilled
     },
     props: paginationPagerProps,
     emits: ["change"],
@@ -28481,7 +28452,7 @@
     },
     icon: {
       type: definePropType([String, Object]),
-      default: QuestionFilled
+      default: questionFilled
     },
     iconColor: {
       type: String,
@@ -28764,80 +28735,82 @@
   const ElPopover = _Popover;
   const ElPopoverDirective = _PopoverDirective;
 
+  const progressProps = buildProps({
+    type: {
+      type: String,
+      default: "line",
+      values: ["line", "circle", "dashboard"]
+    },
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0 && val <= 100
+    },
+    status: {
+      type: String,
+      default: "",
+      values: ["", "success", "exception", "warning"]
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 3
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6
+    },
+    strokeLinecap: {
+      type: definePropType(String),
+      default: "round"
+    },
+    textInside: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 126
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: definePropType([
+        String,
+        Array,
+        Function
+      ]),
+      default: ""
+    },
+    format: {
+      type: definePropType(Function),
+      default: (percentage) => `${percentage}%`
+    }
+  });
+
   var script$B = vue.defineComponent({
     name: "ElProgress",
     components: {
       ElIcon,
-      CircleCheck,
-      CircleClose,
-      Check,
-      Close,
-      WarningFilled
-    },
-    props: {
-      type: {
-        type: String,
-        default: "line",
-        validator: (val) => ["line", "circle", "dashboard"].indexOf(val) > -1
-      },
-      percentage: {
-        type: Number,
-        default: 0,
-        validator: (val) => val >= 0 && val <= 100
-      },
-      status: {
-        type: String,
-        default: "",
-        validator: (val) => ["", "success", "exception", "warning"].indexOf(val) > -1
-      },
-      indeterminate: {
-        type: Boolean,
-        default: false
-      },
-      duration: {
-        type: Number,
-        default: 3
-      },
-      strokeWidth: {
-        type: Number,
-        default: 6
-      },
-      strokeLinecap: {
-        type: String,
-        default: "round"
-      },
-      textInside: {
-        type: Boolean,
-        default: false
-      },
-      width: {
-        type: Number,
-        default: 126
-      },
-      showText: {
-        type: Boolean,
-        default: true
-      },
-      color: {
-        type: [String, Array, Function],
-        default: ""
-      },
-      format: {
-        type: Function,
-        default: (percentage) => `${percentage}%`
-      }
+      CircleCheck: circleCheck,
+      CircleClose: circleClose,
+      Check: check,
+      Close: close$2,
+      WarningFilled: warningFilled
     },
+    props: progressProps,
     setup(props) {
-      const barStyle = vue.computed(() => {
-        return {
-          width: `${props.percentage}%`,
-          animationDuration: `${props.duration}s`,
-          backgroundColor: getCurrentColor(props.percentage)
-        };
-      });
-      const relativeStrokeWidth = vue.computed(() => {
-        return (props.strokeWidth / props.width * 100).toFixed(1);
-      });
+      const barStyle = vue.computed(() => ({
+        width: `${props.percentage}%`,
+        animationDuration: `${props.duration}s`,
+        backgroundColor: getCurrentColor(props.percentage)
+      }));
+      const relativeStrokeWidth = vue.computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
       const radius = vue.computed(() => {
         if (props.type === "circle" || props.type === "dashboard") {
           return parseInt(`${50 - parseFloat(relativeStrokeWidth.value) / 2}`, 10);
@@ -28855,29 +28828,21 @@
           a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
           `;
       });
-      const perimeter = vue.computed(() => {
-        return 2 * Math.PI * radius.value;
-      });
-      const rate = vue.computed(() => {
-        return props.type === "dashboard" ? 0.75 : 1;
-      });
+      const perimeter = vue.computed(() => 2 * Math.PI * radius.value);
+      const rate = vue.computed(() => props.type === "dashboard" ? 0.75 : 1);
       const strokeDashoffset = vue.computed(() => {
         const offset = -1 * perimeter.value * (1 - rate.value) / 2;
         return `${offset}px`;
       });
-      const trailPathStyle = vue.computed(() => {
-        return {
-          strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
-          strokeDashoffset: strokeDashoffset.value
-        };
-      });
-      const circlePathStyle = vue.computed(() => {
-        return {
-          strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
-          strokeDashoffset: strokeDashoffset.value,
-          transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease"
-        };
-      });
+      const trailPathStyle = vue.computed(() => ({
+        strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
+        strokeDashoffset: strokeDashoffset.value
+      }));
+      const circlePathStyle = vue.computed(() => ({
+        strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
+        strokeDashoffset: strokeDashoffset.value,
+        transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease"
+      }));
       const stroke = vue.computed(() => {
         let ret;
         if (props.color) {
@@ -28901,20 +28866,18 @@
       });
       const statusIcon = vue.computed(() => {
         if (props.status === "warning") {
-          return WarningFilled;
+          return warningFilled;
         }
         if (props.type === "line") {
-          return props.status === "success" ? CircleCheck : CircleClose;
+          return props.status === "success" ? circleCheck : circleClose;
         } else {
-          return props.status === "success" ? Check : Close;
+          return props.status === "success" ? check : close$2;
         }
       });
       const progressTextSize = vue.computed(() => {
         return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
       });
-      const content = vue.computed(() => {
-        return props.format(props.percentage);
-      });
+      const content = vue.computed(() => props.format(props.percentage));
       const getCurrentColor = (percentage) => {
         var _a;
         const { color } = props;
@@ -28933,13 +28896,12 @@
             }
             return seriesColor;
           });
-          const colorArray = seriesColors.sort((a, b) => a.percentage - b.percentage);
-          for (let i = 0; i < colorArray.length; i++) {
-            if (colorArray[i].percentage > percentage) {
-              return colorArray[i].color;
-            }
+          const colors = seriesColors.sort((a, b) => a.percentage - b.percentage);
+          for (const color2 of colors) {
+            if (color2.percentage > percentage)
+              return color2.color;
           }
-          return (_a = colorArray[colorArray.length - 1]) == null ? void 0 : _a.color;
+          return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
         }
       };
       const slotData = vue.computed(() => {
@@ -28961,7 +28923,6 @@
         statusIcon,
         progressTextSize,
         content,
-        getCurrentColor,
         slotData
       };
     }
@@ -29058,13 +29019,9 @@
   }
 
   script$B.render = render$w;
-  script$B.__file = "packages/components/progress/src/index.vue";
+  script$B.__file = "packages/components/progress/src/progress.vue";
 
-  script$B.install = (app) => {
-    app.component(script$B.name, script$B);
-  };
-  const _Progress = script$B;
-  const ElProgress = _Progress;
+  const ElProgress = withInstall(script$B);
 
   const rateProps = buildProps({
     modelValue: {
@@ -29097,15 +29054,15 @@
     },
     icons: {
       type: definePropType([Array, Object]),
-      default: () => [StarFilled, StarFilled, StarFilled]
+      default: () => [starFilled, starFilled, starFilled]
     },
     voidIcon: {
       type: definePropType([String, Object]),
-      default: () => Star
+      default: () => star
     },
     disabledvoidIcon: {
       type: definePropType([String, Object]),
-      default: () => StarFilled
+      default: () => starFilled
     },
     disabled: {
       type: Boolean,
@@ -29161,8 +29118,8 @@
     name: "ElRate",
     components: {
       ElIcon,
-      StarFilled,
-      Star
+      StarFilled: starFilled,
+      Star: star
     },
     props: rateProps,
     emits: rateEmits,
@@ -29392,10 +29349,10 @@
     info: "icon-info"
   };
   const IconComponentMap = {
-    [IconMap.success]: CircleCheckFilled,
-    [IconMap.warning]: WarningFilled,
-    [IconMap.error]: CircleCloseFilled,
-    [IconMap.info]: InfoFilled
+    [IconMap.success]: circleCheckFilled,
+    [IconMap.warning]: warningFilled,
+    [IconMap.error]: circleCloseFilled,
+    [IconMap.info]: infoFilled
   };
   const resultProps = buildProps({
     title: {
@@ -31297,7 +31254,7 @@
     clearable: Boolean,
     clearIcon: {
       type: [String, Object],
-      default: CircleClose
+      default: circleClose
     },
     collapseTags: Boolean,
     defaultFirstOption: Boolean,
@@ -31710,8 +31667,6 @@
   const useSelect = (props, emit) => {
     const { t } = useLocale();
     const elForm = vue.inject(elFormKey, {});
-    const elFormItem = vue.inject(elFormItemKey, {});
-    const $ELEMENT = useGlobalConfig$1();
     const states = vue.reactive({
       inputValue: DEFAULT_INPUT_PLACEHOLDER,
       displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -31760,7 +31715,7 @@
       const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue;
       return criteria;
     });
-    const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : ArrowUp);
+    const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : arrowUp);
     const iconReverse = vue.computed(() => iconComponent.value && expanded.value ? "is-reverse" : "");
     const debounce = vue.computed(() => props.remote ? 300 : 0);
     const emptyText = vue.computed(() => {
@@ -31806,7 +31761,7 @@
       }).filter((v) => v !== null));
     });
     const optionsAllDisabled = vue.computed(() => filteredOptions.value.every((option) => option.disabled));
-    const selectSize = vue.computed(() => props.size || elFormItem.size || $ELEMENT.size);
+    const selectSize = useSize();
     const collapseTagSize = vue.computed(() => ["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small");
     const tagMaxWidth = vue.computed(() => {
       const select = selectionRef.value;
@@ -33849,8 +33804,8 @@
     name: "ElStep",
     components: {
       ElIcon,
-      Close,
-      Check
+      Close: close$2,
+      Check: check
     },
     props: {
       title: {
@@ -34067,89 +34022,98 @@
   });
   const ElStep = withNoopInstall(script$m);
 
-  var script$l = vue.defineComponent({
-    name: "ElSwitch",
-    components: { ElIcon: ElIcon$1, Loading: Loading$2 },
-    props: {
-      modelValue: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      value: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      width: {
-        type: Number,
-        default: 40
-      },
-      inlinePrompt: {
-        type: Boolean,
-        default: false
-      },
-      activeIcon: {
-        type: [String, Object],
-        default: ""
-      },
-      inactiveIcon: {
-        type: [String, Object],
-        default: ""
-      },
-      activeText: {
-        type: String,
-        default: ""
-      },
-      inactiveText: {
-        type: String,
-        default: ""
-      },
-      activeColor: {
-        type: String,
-        default: ""
-      },
-      inactiveColor: {
-        type: String,
-        default: ""
-      },
-      borderColor: {
-        type: String,
-        default: ""
-      },
-      activeValue: {
-        type: [Boolean, String, Number],
-        default: true
-      },
-      inactiveValue: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      name: {
-        type: String,
-        default: ""
-      },
-      validateEvent: {
-        type: Boolean,
-        default: true
-      },
-      id: String,
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      beforeChange: Function
+  const switchProps = buildProps({
+    modelValue: {
+      type: [Boolean, String, Number],
+      default: false
     },
-    emits: ["update:modelValue", "change", "input"],
-    setup(props, ctx) {
-      const elForm = vue.inject(elFormKey, {});
-      const elFormItem = vue.inject(elFormItemKey, {});
+    value: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 40
+    },
+    inlinePrompt: {
+      type: Boolean,
+      default: false
+    },
+    activeIcon: {
+      type: definePropType([String, Object]),
+      default: ""
+    },
+    inactiveIcon: {
+      type: definePropType([String, Object]),
+      default: ""
+    },
+    activeText: {
+      type: String,
+      default: ""
+    },
+    inactiveText: {
+      type: String,
+      default: ""
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    inactiveColor: {
+      type: String,
+      default: ""
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    activeValue: {
+      type: [Boolean, String, Number],
+      default: true
+    },
+    inactiveValue: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    id: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    beforeChange: {
+      type: definePropType(Function)
+    }
+  });
+  const switchEmits = {
+    [UPDATE_MODEL_EVENT]: (val) => isBool(val) || isString$1(val) || isNumber(val),
+    [CHANGE_EVENT]: (val) => isBool(val) || isString$1(val) || isNumber(val),
+    [INPUT_EVENT]: (val) => isBool(val) || isString$1(val) || isNumber(val)
+  };
+
+  const COMPONENT_NAME$3 = "ElSwitch";
+  var script$l = vue.defineComponent({
+    name: COMPONENT_NAME$3,
+    components: { ElIcon: ElIcon$1, Loading: loading },
+    props: switchProps,
+    emits: switchEmits,
+    setup(props, { emit }) {
+      const { formItem } = useFormItem();
+      const switchDisabled = useDisabled$1(vue.computed(() => props.loading));
       const isModelValue = vue.ref(props.modelValue !== false);
-      const input = vue.ref(null);
-      const core = vue.ref(null);
-      const scope = "ElSwitch";
+      const input = vue.ref();
+      const core = vue.ref();
       vue.watch(() => props.modelValue, () => {
         isModelValue.value = true;
       });
@@ -34159,13 +34123,11 @@
       const actualValue = vue.computed(() => {
         return isModelValue.value ? props.modelValue : props.value;
       });
-      const checked = vue.computed(() => {
-        return actualValue.value === props.activeValue;
-      });
-      if (!~[props.activeValue, props.inactiveValue].indexOf(actualValue.value)) {
-        ctx.emit("update:modelValue", props.inactiveValue);
-        ctx.emit("change", props.inactiveValue);
-        ctx.emit("input", props.inactiveValue);
+      const checked = vue.computed(() => actualValue.value === props.activeValue);
+      if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
+        emit(UPDATE_MODEL_EVENT, props.inactiveValue);
+        emit(CHANGE_EVENT, props.inactiveValue);
+        emit(INPUT_EVENT, props.inactiveValue);
       }
       vue.watch(checked, () => {
         var _a;
@@ -34174,17 +34136,14 @@
           setBackgroundColor();
         }
         if (props.validateEvent) {
-          (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
         }
       });
-      const switchDisabled = vue.computed(() => {
-        return props.disabled || props.loading || (elForm || {}).disabled;
-      });
       const handleChange = () => {
         const val = checked.value ? props.inactiveValue : props.activeValue;
-        ctx.emit("update:modelValue", val);
-        ctx.emit("change", val);
-        ctx.emit("input", val);
+        emit(UPDATE_MODEL_EVENT, val);
+        emit(CHANGE_EVENT, val);
+        emit(INPUT_EVENT, val);
         vue.nextTick(() => {
           input.value.checked = checked.value;
         });
@@ -34200,7 +34159,7 @@
         const shouldChange = beforeChange();
         const isExpectType = [isPromise(shouldChange), isBool(shouldChange)].some((i) => i);
         if (!isExpectType) {
-          throwError(scope, "beforeChange must return type `Promise<boolean>` or `boolean`");
+          throwError(COMPONENT_NAME$3, "beforeChange must return type `Promise<boolean>` or `boolean`");
         }
         if (isPromise(shouldChange)) {
           shouldChange.then((result) => {
@@ -34370,13 +34329,9 @@
   }
 
   script$l.render = render$i;
-  script$l.__file = "packages/components/switch/src/index.vue";
+  script$l.__file = "packages/components/switch/src/switch.vue";
 
-  script$l.install = (app) => {
-    app.component(script$l.name, script$l);
-  };
-  const _Switch = script$l;
-  const ElSwitch = _Switch;
+  const ElSwitch = withInstall(script$l);
 
   const getCell = function(event) {
     let cell = event.target;
@@ -34621,7 +34576,6 @@
     function renderArrow() {
       const arrow2 = document.createElement("div");
       arrow2.className = "el-popper__arrow";
-      arrow2.style.bottom = "-4px";
       return arrow2;
     }
     function showPopper() {
@@ -35860,8 +35814,8 @@
       ElScrollbar: ElScrollbar$1,
       ElPopper,
       ElIcon,
-      ArrowDown,
-      ArrowUp
+      ArrowDown: arrowDown,
+      ArrowUp: arrowUp
     },
     directives: { ClickOutside },
     props: {
@@ -37349,7 +37303,6 @@
   }
 
   function useStyle(props, layout, store, table) {
-    const $ELEMENT = useGlobalConfig$1();
     const isHidden = vue.ref(false);
     const renderExpanded = vue.ref(null);
     const resizeProxyVisible = vue.ref(false);
@@ -37509,9 +37462,7 @@
         doLayout();
       }
     };
-    const tableSize = vue.computed(() => {
-      return props.size || $ELEMENT.size;
-    });
+    const tableSize = useSize();
     const bodyWidth = vue.computed(() => {
       const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
       return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
@@ -38192,7 +38143,7 @@
             return [
               vue.h(ElIcon, null, {
                 default: () => {
-                  return [vue.h(ArrowRight)];
+                  return [vue.h(arrowRight)];
                 }
               })
             ];
@@ -38240,9 +38191,9 @@
         "el-table__expand-icon",
         treeNode.expanded ? "el-table__expand-icon--expanded" : ""
       ];
-      let icon = ArrowRight;
+      let icon = arrowRight;
       if (treeNode.loading) {
-        icon = Loading$2;
+        icon = loading;
       }
       ele.push(vue.h("div", {
         class: expandClasses,
@@ -38901,14 +38852,14 @@
               scrollable.value.prev ? "" : "is-disabled"
             ],
             onClick: scrollPrev
-          }, [vue.h(ElIcon, {}, { default: () => vue.h(ArrowLeft) })]),
+          }, [vue.h(ElIcon, {}, { default: () => vue.h(arrowLeft) })]),
           vue.h("span", {
             class: [
               "el-tabs__nav-next",
               scrollable.value.next ? "" : "is-disabled"
             ],
             onClick: scrollNext
-          }, [vue.h(ElIcon, {}, { default: () => vue.h(ArrowRight) })])
+          }, [vue.h(ElIcon, {}, { default: () => vue.h(arrowRight) })])
         ] : null;
         const tabs = props.panes.map((pane, index) => {
           var _a, _b;
@@ -38918,7 +38869,7 @@
           const btnClose = closable ? vue.h(ElIcon, {
             class: "is-icon-close",
             onClick: (ev) => props.onTabRemove(pane, ev)
-          }, { default: () => vue.h(Close) }) : null;
+          }, { default: () => vue.h(close$2) }) : null;
           const tabLabelContent = ((_b = (_a = pane.instance.slots).label) == null ? void 0 : _b.call(_a)) || pane.props.label;
           const tabindex = pane.active ? 0 : -1;
           return vue.h("div", {
@@ -39124,7 +39075,7 @@
             if (ev.code === EVENT_CODE.enter)
               handleTabAdd();
           }
-        }, [vue.h(ElIcon$1, { class: "is-icon-plus" }, { default: () => vue.h(Plus) })]) : null;
+        }, [vue.h(ElIcon$1, { class: "is-icon-plus" }, { default: () => vue.h(plus) })]) : null;
         const header = vue.h("div", { class: ["el-tabs__header", `is-${props.tabPosition}`] }, [
           newButton,
           vue.h(TabNav, {
@@ -39322,11 +39273,11 @@
       },
       prefixIcon: {
         type: [String, Object],
-        default: Clock
+        default: clock
       },
       clearIcon: {
         type: [String, Object],
-        default: CircleClose
+        default: circleClose
       }
     },
     emits: ["change", "blur", "focus", "update:modelValue"],
@@ -39685,11 +39636,11 @@
         return panelState.query.length > 0 && filteredData.value.length === 0;
       });
       const inputIcon = vue.computed(() => {
-        return panelState.query.length > 0 && panelState.inputHover ? CircleClose : Search;
+        return panelState.query.length > 0 && panelState.inputHover ? circleClose : search;
       });
       const hasFooter = vue.computed(() => !!slots.default()[0].children.length);
       const clearQuery = () => {
-        if (inputIcon.value === CircleClose) {
+        if (inputIcon.value === circleClose) {
           panelState.query = "";
         }
       };
@@ -39897,8 +39848,8 @@
       TransferPanel: script$d,
       ElButton,
       ElIcon: ElIcon$1,
-      ArrowLeft,
-      ArrowRight
+      ArrowLeft: arrowLeft,
+      ArrowRight: arrowRight
     },
     props: {
       data: {
@@ -41040,7 +40991,7 @@
       ElCheckbox,
       NodeContent: script$b,
       ElIcon,
-      Loading: Loading$2
+      Loading: loading
     },
     props: {
       node: {
@@ -41212,7 +41163,7 @@
         handleDragOver,
         handleDrop,
         handleDragEnd,
-        CaretRight
+        CaretRight: caretRight
       };
     }
   });
@@ -42377,7 +42328,7 @@
     name: "ElTreeNode",
     components: {
       ElIcon: ElIcon$1,
-      CaretRight,
+      CaretRight: caretRight,
       ElCheckbox,
       ElNodeContent
     },
@@ -42685,14 +42636,14 @@
   var script$6 = vue.defineComponent({
     name: "ElUploadList",
     components: {
-      ElProgress: _Progress,
+      ElProgress,
       ElIcon,
-      Document,
-      Delete,
-      Close,
-      ZoomIn,
-      Check,
-      CircleCheck
+      Document: document$1,
+      Delete: _delete,
+      Close: close$2,
+      ZoomIn: zoomIn,
+      Check: check,
+      CircleCheck: circleCheck
     },
     props: {
       files: {
@@ -44501,7 +44452,7 @@
     ElBreadcrumb,
     ElBreadcrumbItem,
     ElButton,
-    ElButtonGroup$2,
+    ElButtonGroup$1,
     ElCalendar,
     ElCard,
     ElCarousel,
@@ -44700,12 +44651,8 @@
   };
   const ElInfiniteScroll = _InfiniteScroll;
 
-  function createLoadingComponent({
-    options,
-    globalLoadingOption
-  }) {
-    let vm = null;
-    let afterLeaveTimer = null;
+  function createLoadingComponent(options) {
+    let afterLeaveTimer;
     const afterLeaveFlag = vue.ref(false);
     const data = vue.reactive({
       ...options,
@@ -44717,6 +44664,7 @@
       data.text = text;
     }
     function destroySelf() {
+      var _a, _b;
       const target = data.parent;
       if (!target.vLoadingAddClassList) {
         let loadingNumber = target.getAttribute("loading-number");
@@ -44729,16 +44677,14 @@
         }
         removeClass(target, "el-loading-parent--hidden");
       }
-      if (vm.el && vm.el.parentNode) {
-        vm.el.parentNode.removeChild(vm.el);
-      }
+      (_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
     }
     function close() {
+      var _a;
+      if (options.beforeClose && !options.beforeClose())
+        return;
       const target = data.parent;
-      target.vLoadingAddClassList = null;
-      if (data.fullscreen) {
-        globalLoadingOption.fullscreenLoading = void 0;
-      }
+      target.vLoadingAddClassList = void 0;
       afterLeaveFlag.value = true;
       clearTimeout(afterLeaveTimer);
       afterLeaveTimer = window.setTimeout(() => {
@@ -44748,6 +44694,7 @@
         }
       }, 400);
       data.visible = false;
+      (_a = options.closed) == null ? void 0 : _a.call(options);
     }
     function handleAfterLeave() {
       if (!afterLeaveFlag.value)
@@ -44755,81 +44702,117 @@
       afterLeaveFlag.value = false;
       destroySelf();
     }
-    const componentSetupConfig = {
-      ...vue.toRefs(data),
-      setText,
-      close,
-      handleAfterLeave
-    };
     const elLoadingComponent = {
       name: "ElLoading",
       setup() {
-        return componentSetupConfig;
-      },
-      render() {
-        const svg = this.spinner || this.svg;
-        const spinner = vue.h("svg", {
-          class: "circular",
-          viewBox: this.svgViewBox ? this.svgViewBox : "25 25 50 50",
-          ...svg ? { innerHTML: svg } : {}
-        }, [
-          vue.h("circle", {
-            class: "path",
-            cx: "50",
-            cy: "50",
-            r: "20",
-            fill: "none"
-          })
-        ]);
-        const spinnerText = vue.h("p", { class: "el-loading-text" }, [this.text]);
-        return vue.h(vue.Transition, {
-          name: "el-loading-fade",
-          onAfterLeave: this.handleAfterLeave
-        }, {
-          default: vue.withCtx(() => [
-            vue.withDirectives(vue.createVNode("div", {
-              style: {
-                backgroundColor: this.background || ""
-              },
-              class: [
-                "el-loading-mask",
-                this.customClass,
-                this.fullscreen ? "is-fullscreen" : ""
-              ]
-            }, [
-              vue.h("div", {
-                class: "el-loading-spinner"
-              }, [spinner, this.text ? spinnerText : null])
-            ]), [[vue.vShow, this.visible]])
-          ])
-        });
+        return () => {
+          const svg = data.spinner || data.svg;
+          const spinner = vue.h("svg", {
+            class: "circular",
+            viewBox: data.svgViewBox ? data.svgViewBox : "25 25 50 50",
+            ...svg ? { innerHTML: svg } : {}
+          }, [
+            vue.h("circle", {
+              class: "path",
+              cx: "50",
+              cy: "50",
+              r: "20",
+              fill: "none"
+            })
+          ]);
+          const spinnerText = data.text ? vue.h("p", { class: "el-loading-text" }, [data.text]) : void 0;
+          return vue.h(vue.Transition, {
+            name: "el-loading-fade",
+            onAfterLeave: handleAfterLeave
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createVNode("div", {
+                style: {
+                  backgroundColor: data.background || ""
+                },
+                class: [
+                  "el-loading-mask",
+                  data.customClass,
+                  data.fullscreen ? "is-fullscreen" : ""
+                ]
+              }, [
+                vue.h("div", {
+                  class: "el-loading-spinner"
+                }, [spinner, spinnerText])
+              ]), [[vue.vShow, data.visible]])
+            ])
+          });
+        };
       }
     };
-    vm = vue.createVNode(elLoadingComponent);
-    vue.render(vm, document.createElement("div"));
+    const vm = vue.createApp(elLoadingComponent).mount(document.createElement("div"));
     return {
-      ...componentSetupConfig,
+      ...vue.toRefs(data),
+      setText,
+      close,
+      handleAfterLeave,
       vm,
       get $el() {
-        return vm.el;
+        return vm.$el;
       }
     };
   }
 
-  const defaults = {
-    parent: null,
-    background: "",
-    svg: null,
-    svgViewBox: null,
-    spinner: false,
-    text: null,
-    fullscreen: true,
-    body: false,
-    lock: false,
-    customClass: ""
+  let fullscreenInstance = void 0;
+  const Loading = function(options = {}) {
+    if (!isClient)
+      return void 0;
+    const resolved = resolveOptions(options);
+    if (resolved.fullscreen && fullscreenInstance) {
+      fullscreenInstance.close();
+    }
+    const instance = createLoadingComponent({
+      ...resolved,
+      closed: () => {
+        var _a;
+        (_a = resolved.closed) == null ? void 0 : _a.call(resolved);
+        if (resolved.fullscreen)
+          fullscreenInstance = void 0;
+      }
+    });
+    addStyle(resolved, resolved.parent, instance);
+    addClassList(resolved, resolved.parent, instance);
+    resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance);
+    let loadingNumber = resolved.parent.getAttribute("loading-number");
+    if (!loadingNumber) {
+      loadingNumber = "1";
+    } else {
+      loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
+    }
+    resolved.parent.setAttribute("loading-number", loadingNumber);
+    resolved.parent.appendChild(instance.$el);
+    vue.nextTick(() => instance.visible.value = resolved.visible);
+    if (resolved.fullscreen) {
+      fullscreenInstance = instance;
+    }
+    return instance;
   };
-  const globalLoadingOption = {
-    fullscreenLoading: null
+  const resolveOptions = (options) => {
+    var _a, _b, _c, _d;
+    let target;
+    if (isString$1(options.target)) {
+      target = (_a = document.querySelector(options.target)) != null ? _a : document.body;
+    } else {
+      target = options.target || document.body;
+    }
+    return {
+      parent: target === document.body || options.body ? document.body : target,
+      background: options.background || "",
+      svg: options.svg || "",
+      svgViewBox: options.svgViewBox || "",
+      spinner: options.spinner || false,
+      text: options.text || "",
+      fullscreen: target === document.body && ((_b = options.fullscreen) != null ? _b : true),
+      lock: (_c = options.lock) != null ? _c : false,
+      customClass: options.customClass || "",
+      visible: (_d = options.visible) != null ? _d : true,
+      target
+    };
   };
   const addStyle = async (options, parent, instance) => {
     const maskStyle = {};
@@ -44837,22 +44820,22 @@
       instance.originalPosition.value = getStyle(document.body, "position");
       instance.originalOverflow.value = getStyle(document.body, "overflow");
       maskStyle.zIndex = PopupManager.nextZIndex();
-    } else if (options.body) {
+    } else if (options.parent === document.body) {
       instance.originalPosition.value = getStyle(document.body, "position");
       await vue.nextTick();
-      ["top", "left"].forEach((property) => {
+      for (const property of ["top", "left"]) {
         const scroll = property === "top" ? "scrollTop" : "scrollLeft";
         maskStyle[property] = `${options.target.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] - parseInt(getStyle(document.body, `margin-${property}`), 10)}px`;
-      });
-      ["height", "width"].forEach((property) => {
+      }
+      for (const property of ["height", "width"]) {
         maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`;
-      });
+      }
     } else {
       instance.originalPosition.value = getStyle(parent, "position");
     }
-    Object.keys(maskStyle).forEach((property) => {
-      instance.$el.style[property] = maskStyle[property];
-    });
+    for (const [key, value] of Object.entries(maskStyle)) {
+      instance.$el.style[key] = value;
+    }
   };
   const addClassList = (options, parent, instance) => {
     if (instance.originalPosition.value !== "absolute" && instance.originalPosition.value !== "fixed") {
@@ -44866,76 +44849,43 @@
       removeClass(parent, "el-loading-parent--hidden");
     }
   };
-  const Loading = function(options = {}) {
-    if (isServer)
-      return;
-    options = {
-      ...defaults,
-      ...options
+
+  const INSTANCE_KEY = Symbol("ElLoading");
+  const createInstance = (el, binding) => {
+    var _a, _b, _c, _d;
+    const vm = binding.instance;
+    const getBindingProp = (key) => isObject$a(binding.value) ? binding.value[key] : void 0;
+    const resolveExpression = (key) => {
+      const data = isString$1(key) && (vm == null ? void 0 : vm[key]) || key;
+      if (data)
+        return vue.ref(data);
+      else
+        return data;
     };
-    if (typeof options.target === "string") {
-      options.target = document.querySelector(options.target);
-    }
-    options.target = options.target || document.body;
-    if (options.target !== document.body) {
-      options.fullscreen = false;
-    } else {
-      options.body = true;
-    }
-    if (options.fullscreen && globalLoadingOption.fullscreenLoading) {
-      globalLoadingOption.fullscreenLoading.close();
-    }
-    const parent = options.body ? document.body : options.target;
-    options.parent = parent;
-    const instance = createLoadingComponent({
+    const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(`element-loading-${hyphenate(name)}`));
+    const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen;
+    const options = {
+      text: getProp("text"),
+      svg: getProp("svg"),
+      svgViewBox: getProp("svgViewBox"),
+      spinner: getProp("spinner"),
+      background: getProp("background"),
+      customClass: getProp("customClass"),
+      fullscreen,
+      target: (_b = getBindingProp("target")) != null ? _b : fullscreen ? void 0 : el,
+      body: (_c = getBindingProp("body")) != null ? _c : binding.modifiers.body,
+      lock: (_d = getBindingProp("lock")) != null ? _d : binding.modifiers.lock
+    };
+    el[INSTANCE_KEY] = {
       options,
-      globalLoadingOption
-    });
-    addStyle(options, parent, instance);
-    addClassList(options, parent, instance);
-    options.parent.vLoadingAddClassList = () => {
-      addClassList(options, parent, instance);
+      instance: Loading(options)
     };
-    let loadingNumber = parent.getAttribute("loading-number");
-    if (!loadingNumber) {
-      loadingNumber = 1;
-    } else {
-      loadingNumber = Number.parseInt(loadingNumber) + 1;
-    }
-    parent.setAttribute("loading-number", loadingNumber.toString());
-    parent.appendChild(instance.$el);
-    vue.nextTick().then(() => {
-      instance.visible.value = hasOwn(options, "visible") ? options.visible : true;
-    });
-    if (options.fullscreen) {
-      globalLoadingOption.fullscreenLoading = instance;
-    }
-    return instance;
   };
-  var Loading$1 = Loading;
-
-  const INSTANCE_NAME = "ElLoading";
-  const createInstance = (el, binding) => {
-    const textExr = el.getAttribute("element-loading-text");
-    const spinnerExr = el.getAttribute("element-loading-spinner");
-    const svgExr = el.getAttribute("element-loading-svg");
-    const svgViewBoxExr = el.getAttribute("element-loading-svg-view-box");
-    const backgroundExr = el.getAttribute("element-loading-background");
-    const customClassExr = el.getAttribute("element-loading-custom-class");
-    const vm = binding.instance;
-    el[INSTANCE_NAME] = Loading$1({
-      text: vm && vm[textExr] || textExr,
-      svg: vm && vm[svgExr] || svgExr,
-      svgViewBox: vm && vm[svgViewBoxExr] || svgViewBoxExr,
-      spinner: vm && vm[spinnerExr] || spinnerExr,
-      background: vm && vm[backgroundExr] || backgroundExr,
-      customClass: vm && vm[customClassExr] || customClassExr,
-      fullscreen: !!binding.modifiers.fullscreen,
-      target: binding.modifiers.fullscreen ? null : el,
-      body: !!binding.modifiers.body,
-      visible: true,
-      lock: !!binding.modifiers.lock
-    });
+  const updateOptions = (newOptions, originalOptions) => {
+    for (const key of Object.keys(originalOptions)) {
+      if (vue.isRef(originalOptions[key]))
+        originalOptions[key].value = newOptions[key];
+    }
   };
   const vLoading = {
     mounted(el, binding) {
@@ -44944,32 +44894,34 @@
       }
     },
     updated(el, binding) {
-      const instance = el[INSTANCE_NAME];
+      const instance = el[INSTANCE_KEY];
       if (binding.oldValue !== binding.value) {
-        if (binding.value) {
+        if (binding.value && !binding.oldValue) {
           createInstance(el, binding);
+        } else if (binding.value && binding.oldValue) {
+          if (isObject$a(binding.value))
+            updateOptions(binding.value, instance.options);
         } else {
-          instance == null ? void 0 : instance.close();
+          instance == null ? void 0 : instance.instance.close();
         }
       }
     },
     unmounted(el) {
       var _a;
-      (_a = el[INSTANCE_NAME]) == null ? void 0 : _a.close();
+      (_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close();
     }
   };
-  var vLoading$1 = vLoading;
 
   const ElLoading = {
     install(app) {
-      app.directive("loading", vLoading$1);
-      app.config.globalProperties.$loading = Loading$1;
+      app.directive("loading", vLoading);
+      app.config.globalProperties.$loading = Loading;
     },
-    directive: vLoading$1,
-    service: Loading$1
+    directive: vLoading,
+    service: Loading
   };
-  const ElLoadingDirective = vLoading$1;
-  const ElLoadingService = Loading$1;
+  const ElLoadingDirective = vLoading;
+  const ElLoadingService = Loading;
 
   const messageTypes = ["success", "info", "warning", "error"];
   const messageProps = buildProps({
@@ -45046,6 +44998,7 @@
     emits: messageEmits,
     setup(props) {
       const visible = vue.ref(false);
+      const badgeType = vue.ref(props.type ? props.type === "error" ? "danger" : props.type : "info");
       let stopTimer = void 0;
       const typeClass = vue.computed(() => {
         const type = props.type;
@@ -45095,6 +45048,7 @@
         iconComponent,
         customStyle,
         visible,
+        badgeType,
         close,
         clearTimer,
         startTimer
@@ -45117,62 +45071,59 @@
       onBeforeLeave: _ctx.onClose,
       onAfterLeave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("destroy"))
     }, {
-      default: vue.withCtx(() => {
-        var _a;
-        return [
-          vue.withDirectives(vue.createElementVNode("div", {
-            id: _ctx.id,
-            class: vue.normalizeClass([
-              "el-message",
-              _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "",
-              _ctx.center ? "is-center" : "",
-              _ctx.showClose ? "is-closable" : "",
-              _ctx.customClass
+      default: vue.withCtx(() => [
+        vue.withDirectives(vue.createElementVNode("div", {
+          id: _ctx.id,
+          class: vue.normalizeClass([
+            "el-message",
+            _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "",
+            _ctx.center ? "is-center" : "",
+            _ctx.showClose ? "is-closable" : "",
+            _ctx.customClass
+          ]),
+          style: vue.normalizeStyle(_ctx.customStyle),
+          role: "alert",
+          onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
+          onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
+        }, [
+          _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, {
+            key: 0,
+            value: _ctx.repeatNum,
+            type: _ctx.badgeType,
+            class: "el-message__badge"
+          }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
+          _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 1,
+            class: vue.normalizeClass(["el-message__icon", _ctx.typeClass])
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
             ]),
-            style: vue.normalizeStyle(_ctx.customStyle),
-            role: "alert",
-            onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
-            onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
-          }, [
-            _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, {
-              key: 0,
-              value: _ctx.repeatNum,
-              type: (_a = _ctx.type) != null ? _a : "info",
-              class: "el-message__badge"
-            }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
-            _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-              key: 1,
-              class: vue.normalizeClass(["el-message__icon", _ctx.typeClass])
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
-              ]),
-              _: 1
-            }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-            vue.renderSlot(_ctx.$slots, "default", {}, () => [
-              !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$2, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
-                vue.createElementVNode("p", {
-                  class: "el-message__content",
-                  innerHTML: _ctx.message
-                }, null, 8, _hoisted_3$2)
-              ], 2112))
+            _: 1
+          }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$2, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
+              vue.createElementVNode("p", {
+                class: "el-message__content",
+                innerHTML: _ctx.message
+              }, null, 8, _hoisted_3$2)
+            ], 2112))
+          ]),
+          _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 2,
+            class: "el-message__closeBtn",
+            onClick: vue.withModifiers(_ctx.close, ["stop"])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_close)
             ]),
-            _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-              key: 2,
-              class: "el-message__closeBtn",
-              onClick: vue.withModifiers(_ctx.close, ["stop"])
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_close)
-              ]),
-              _: 1
-            }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
-          ], 46, _hoisted_1$2), [
-            [vue.vShow, _ctx.visible]
-          ])
-        ];
-      }),
+            _: 1
+          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+        ], 46, _hoisted_1$2), [
+          [vue.vShow, _ctx.visible]
+        ])
+      ]),
       _: 3
     }, 8, ["onBeforeLeave"]);
   }
@@ -46160,7 +46111,7 @@
     ElPopoverDirective
   ];
 
-  var installer = makeInstaller$1([...Components, ...Plugins]);
+  var installer = makeInstaller([...Components, ...Plugins]);
 
   const install = installer.install;
   const version = installer.version;
@@ -46189,7 +46140,7 @@
   exports.ElBreadcrumb = ElBreadcrumb;
   exports.ElBreadcrumbItem = ElBreadcrumbItem;
   exports.ElButton = ElButton;
-  exports.ElButtonGroup = ElButtonGroup$2;
+  exports.ElButtonGroup = ElButtonGroup$1;
   exports.ElCalendar = ElCalendar;
   exports.ElCard = ElCard;
   exports.ElCarousel = ElCarousel;
@@ -46309,6 +46260,8 @@
   exports.buttonProps = buttonProps;
   exports.buttonSize = buttonSize;
   exports.buttonType = buttonType;
+  exports.calendarEmits = calendarEmits;
+  exports.calendarProps = calendarProps;
   exports.cardProps = cardProps;
   exports.colProps = colProps;
   exports.configProviderContextKey = configProviderContextKey;
@@ -46317,6 +46270,8 @@
   exports.dialogEmits = dialogEmits;
   exports.dialogProps = dialogProps;
   exports.dividerProps = dividerProps;
+  exports.drawerEmits = drawerEmits;
+  exports.drawerProps = drawerProps;
   exports.elBreadcrumbKey = elBreadcrumbKey;
   exports.elFormItemKey = elFormItemKey;
   exports.elFormKey = elFormKey;
@@ -46338,7 +46293,7 @@
   exports.linkProps = linkProps;
   exports.localeContextKey = localeContextKey;
   exports.localeProviderMaker = localeProviderMaker;
-  exports.makeInstaller = makeInstaller$1;
+  exports.makeInstaller = makeInstaller;
   exports.menuEmits = menuEmits;
   exports.menuItemEmits = menuItemEmits;
   exports.menuItemGroupProps = menuItemGroupProps;
@@ -46359,6 +46314,7 @@
   exports.popconfirmEmits = popconfirmEmits;
   exports.popconfirmProps = popconfirmProps;
   exports.popperDefaultProps = popperDefaultProps;
+  exports.progressProps = progressProps;
   exports.provideLocale = provideLocale;
   exports.radioButtonProps = radioButtonProps;
   exports.radioEmits = radioEmits;
@@ -46386,6 +46342,8 @@
   exports.skeletonProps = skeletonProps;
   exports.spaceProps = spaceProps;
   exports.subMenuProps = subMenuProps;
+  exports.switchEmits = switchEmits;
+  exports.switchProps = switchProps;
   exports.tabBar = tabBar;
   exports.tabNavProps = tabNavProps;
   exports.tabPaneProps = tabPaneProps;
@@ -46399,9 +46357,9 @@
   exports.useAttrs = useAttrs;
   exports.useCascaderConfig = useCascaderConfig;
   exports.useDialog = useDialog;
+  exports.useDisabled = useDisabled$1;
   exports.useFocus = useFocus;
   exports.useFormItem = useFormItem;
-  exports.useFormItemProps = useFormItemProps;
   exports.useGlobalConfig = useGlobalConfig;
   exports.useLocale = useLocale;
   exports.useLocaleProps = useLocaleProps;
@@ -46415,9 +46373,12 @@
   exports.usePopperHook = usePopperHook;
   exports.usePopperProps = usePopperProps;
   exports.usePreventGlobal = usePreventGlobal;
+  exports.useProp = useProp;
   exports.useRadio = useRadio;
   exports.useRestoreActive = useRestoreActive;
   exports.useSameTarget = useSameTarget;
+  exports.useSize = useSize;
+  exports.useSizeProp = useSizeProp;
   exports.useSpace = useSpace;
   exports.useTeleport = useTeleport;
   exports.useThrottleRender = useThrottleRender;