bkui-vue 0.0.1-beta.151 → 0.0.1-beta.154

package/dist/index.esm.js

@@ -6321,7 +6321,7 @@ var lodash = { exports: {} };
       function valuesIn(object) {
         return object == null ? [] : baseValues(object, keysIn(object));
       }
-      function clamp(number, lower, upper) {
+      function clamp2(number, lower, upper) {
         if (upper === undefined$1) {
           upper = lower;
           lower = undefined$1;
@@ -6995,7 +6995,7 @@ var lodash = { exports: {} };
       lodash2.camelCase = camelCase;
       lodash2.capitalize = capitalize;
       lodash2.ceil = ceil;
-      lodash2.clamp = clamp;
+      lodash2.clamp = clamp2;
       lodash2.clone = clone2;
       lodash2.cloneDeep = cloneDeep;
       lodash2.cloneDeepWith = cloneDeepWith;
@@ -8481,7 +8481,7 @@ const warn = (props2, context) => {
 warn.displayName = "warn";
 warn.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M603.52 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M357.11999999999995 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M693.12 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}},{"type":"element","name":"path","attributes":{"d":"M951.68 832c43.775999999999996-42.410666666666664 71.29599999999999-101.41866666666665 72.32-166.86933333333332-4.608-109.696-77.35466666666666-201.0453333333333-176.72533333333334-233.30133333333333 5.674666666666667-12.117333333333331 10.154666666666666-26.282666666666664 10.154666666666666-41.471999999999994 0-4.522666666666666-0.38399999999999995-8.959999999999999-1.152-13.226666666666667-33.834666666666664-181.29066666666665-212.39466666666664-313.1306666666667-425.5146666666667-313.1306666666667-238.71999999999997 0-430.72 167.04-430.72 372.48 1.2799999999999998 107.56266666666666 50.56 203.30666666666664 127.40266666666668 267.05066666666664l-16.682666666666666 55.50933333333333c-2.1759999999999997 6.784-3.456 14.634666666666668-3.456 22.741333333333333 0 42.410666666666664 34.38933333333333 76.8 76.8 76.8 12.458666666666666 0 24.191999999999997-2.944 34.602666666666664-8.234666666666666l101.33333333333333-52.906666666666666c32.81066666666666 7.722666666666666 70.52799999999999 12.159999999999998 109.22666666666666 12.159999999999998 0.08533333333333333 0 0.17066666666666666 0 0.21333333333333332 0h28.16c13.098666666666666-0.7679999999999999 25.130666666666663-4.693333333333333 35.54133333333333-11.050666666666666 54.22933333333333 73.55733333333333 140.672 120.53333333333333 238.07999999999998 120.53333333333333 1.664 0 3.3706666666666667 0 5.034666666666666-0.042666666666666665 21.077333333333332-0.08533333333333333 41.855999999999995-2.1759999999999997 61.99466666666667-6.101333333333333l49.10933333333333 26.581333333333333c9.941333333333333 5.034666666666666 21.717333333333332 8.021333333333333 34.176 8.021333333333333 42.410666666666664 0 76.8-34.38933333333333 76.8-76.8 0-8.106666666666666-1.2799999999999998-15.957333333333333-3.584-23.296zM430.72 752.64c-0.17066666666666666 0-0.38399999999999995 0-0.5973333333333333 0-40.831999999999994 0-80.29866666666666-5.8453333333333335-117.58933333333331-16.72533333333333l-3.456 0.7253333333333334-131.2 67.19999999999999 35.199999999999996-113.27999999999999h-3.1999999999999997c-86.10133333333332-52.05333333333333-143.40266666666668-144.17066666666665-145.92-249.89866666666666 0-172.50133333333332 165.76-312.66133333333335 366.72-312.66133333333335 5.717333333333333-0.3413333333333333 12.415999999999999-0.512 19.157333333333334-0.512 163.32799999999997 0 300.58666666666664 111.40266666666668 340.0106666666667 262.4l-14.805333333333332 2.432c-183.04 0-327.03999999999996 112-327.03999999999996 285.44 0.512 26.709333333333333 5.1626666666666665 52.181333333333335 13.312 75.98933333333332zM872.96 812.8v0l21.759999999999998 67.84-81.28-40.959999999999994h-3.84c-21.119999999999997 6.101333333333333-45.397333333333336 9.6-70.48533333333333 9.6-0.17066666666666666 0-0.38399999999999995 0-0.5546666666666666 0-5.888 0.5973333333333333-12.757333333333332 0.9386666666666665-19.712 0.9386666666666665-107.09333333333332 0-195.2853333333333-80.93866666666666-206.71999999999997-184.95999999999998 10.367999999999999-106.96533333333333 99.072-189.1413333333333 206.976-189.1413333333333 5.973333333333334 0 11.861333333333334 0.256 17.706666666666663 0.7253333333333334 4.309333333333333-0.512 10.197333333333333-0.7253333333333334 16.170666666666666-0.7253333333333334 107.904 0 196.60799999999998 82.17599999999999 206.976 187.34933333333333-1.7066666666666666 63.82933333333333-35.79733333333333 118.44266666666665-86.18666666666667 148.90666666666667z"}},{"type":"element","name":"path","attributes":{"d":"M839.68 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}}]}');
-var Component$E = defineComponent({
+var Component$F = defineComponent({
   name: "Alert",
   props: {
     theme: PropTypes.theme(["info", "success", "warning", "error"]).def("info"),
@@ -8538,8 +8538,8 @@ var Component$E = defineComponent({
     }, [this.closeText ? this.closeText : createVNode(closeLine, null, null)])])]);
   }
 });
-const BkAlert = withInstall(Component$E);
-var Component$D = defineComponent({
+const BkAlert = withInstall(Component$F);
+var Component$E = defineComponent({
   name: "AnimateNumber",
   props: {
     value: PropTypes.number.def(0),
@@ -8587,7 +8587,7 @@ var Component$D = defineComponent({
     return () => createVNode("span", null, [formatValue.value]);
   }
 });
-const BkAnimateNumber = withInstall(Component$D);
+const BkAnimateNumber = withInstall(Component$E);
 const on$1 = (() => {
   if (document.addEventListener) {
     return (element, event, handler) => {
@@ -8616,7 +8616,7 @@ const off$1 = (() => {
     }
   };
 })();
-var Component$C = defineComponent({
+var Component$D = defineComponent({
   name: "Affix",
   props: {
     offsetTop: PropTypes.number.def(0),
@@ -8741,8 +8741,8 @@ var Component$C = defineComponent({
     };
   }
 });
-const BkAffix = withInstall(Component$C);
-var Component$B = defineComponent({
+const BkAffix = withInstall(Component$D);
+var Component$C = defineComponent({
   name: "Backtop",
   props: {
     visibilityHeight: PropTypes.number.def(200),
@@ -8809,8 +8809,8 @@ var Component$B = defineComponent({
     });
   }
 });
-const BkBacktop = withInstall(Component$B);
-var Component$A = defineComponent({
+const BkBacktop = withInstall(Component$C);
+var Component$B = defineComponent({
   name: "Badge",
   props: {
     theme: PropTypes.string.def("primary"),
@@ -8886,8 +8886,8 @@ var Component$A = defineComponent({
     }, [(_f = (_e = (_d = this.$slots).icon) == null ? void 0 : _e.call(_d)) != null ? _f : number]) : ""]);
   }
 });
-const BkBadge = withInstall(Component$A);
-var Component$z = defineComponent({
+const BkBadge = withInstall(Component$B);
+var Component$A = defineComponent({
   name: "Breadcrumb",
   props: {
     extCls: PropTypes.string,
@@ -8986,7 +8986,7 @@ var BreadcrumbItem = defineComponent({
     };
   }
 });
-const BkBreadcrumb = withInstallProps(Component$z, { Item: BreadcrumbItem });
+const BkBreadcrumb = withInstallProps(Component$A, { Item: BreadcrumbItem });
 let BkLoadingMode;
 (function(BkLoadingMode2) {
   BkLoadingMode2["Default"] = "default";
@@ -9017,7 +9017,7 @@ const loadingTypes = {
   color: PropTypes.string.def("white"),
   zIndex: PropTypes.number.def(1)
 };
-var Component$y = defineComponent({
+var Component$z = defineComponent({
   name: "Loading",
   props: loadingTypes,
   setup(props2, ctx) {
@@ -9073,7 +9073,7 @@ var Component$y = defineComponent({
     };
   }
 });
-const BkLoading = withInstallProps(Component$y, { setDefaultIndicator, BkLoadingMode, BkLoadingSize }, true);
+const BkLoading = withInstallProps(Component$z, { setDefaultIndicator, BkLoadingMode, BkLoadingSize }, true);
 const btnSizes = ["", "small", "large"];
 const buttonProps = {
   theme: PropTypes.theme().def(""),
@@ -9093,7 +9093,7 @@ const buttonProps = {
     default: "button"
   }
 };
-var Component$x = defineComponent({
+var Component$y = defineComponent({
   name: "Button",
   props: buttonProps,
   emits: ["click", "mouseover"],
@@ -9182,7 +9182,7 @@ var ButtonGroup = defineComponent({
     };
   }
 });
-const BkButton = withInstallProps(Component$x, { ButtonGroup });
+const BkButton = withInstallProps(Component$y, { ButtonGroup });
 const inputType = {
   type: PropTypes.string.def("text"),
   clearable: PropTypes.bool,
@@ -9204,7 +9204,8 @@ const inputType = {
   precision: PropTypes.number.def(0).validate((val) => val >= 0 && val < 20),
   modelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   size: PropTypes.size(),
-  rows: PropTypes.number
+  rows: PropTypes.number,
+  selectReadonly: PropTypes.bool.def(false)
 };
 let EVENTS$2;
 (function(EVENTS2) {
@@ -9245,7 +9246,7 @@ const inputEmitEventsType = {
   [EVENTS$2.COMPOSITIONUPDATE]: CompositionEventFunction,
   [EVENTS$2.COMPOSITIONEND]: CompositionEventFunction
 };
-var Component$w = defineComponent({
+var Component$x = defineComponent({
   name: "Input",
   inheritAttrs: false,
   props: inputType,
@@ -9267,7 +9268,7 @@ var Component$w = defineComponent({
     const inputCls = computed(() => classes({
       [`${inputClsPrefix.value}--${props2.size}`]: !!props2.size,
       "is-focused": isFocused.value,
-      "is-readonly": props2.readonly,
+      "is-readonly": props2.readonly && !props2.selectReadonly,
       "is-disabled": props2.disabled,
       "is-simplicity": props2.behavior === "simplicity",
       [`${cls}`]: !!cls
@@ -9461,8 +9462,8 @@ var Component$w = defineComponent({
     };
   }
 });
-const BkInput = withInstall(Component$w);
-var Component$v = defineComponent({
+const BkInput = withInstall(Component$x);
+var Component$w = defineComponent({
   name: "Card",
   props: {
     title: PropTypes.string,
@@ -9555,7 +9556,7 @@ var Component$v = defineComponent({
     }, [(_l = (_k = (_j = this.$slots).footer) == null ? void 0 : _k.call(_j)) != null ? _l : "Footer"]) : ""]) : ""]);
   }
 });
-const BkCard = withInstall(Component$v);
+const BkCard = withInstall(Component$w);
 const checkboxGroupKey = Symbol("CheckboxGroup");
 function useFocus$1() {
   const isFocus = ref(false);
@@ -9656,7 +9657,7 @@ const checkboxProps = {
   beforeChange: PropTypes.func,
   size: PropTypes.size().def("large")
 };
-var Component$u = defineComponent({
+var Component$v = defineComponent({
   name: "Checkbox",
   props: checkboxProps,
   emits: ["update:modelValue", "change"],
@@ -9760,7 +9761,7 @@ var BkCheckboxGroup = defineComponent({
     }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
-const BkCheckbox = withInstallProps(Component$u, { Group: BkCheckboxGroup });
+const BkCheckbox = withInstallProps(Component$v, { Group: BkCheckboxGroup });
 const propsCollapse = {
   list: PropTypes.arrayOf(PropTypes.any).def([]),
   idFiled: PropTypes.string.def("$index"),
@@ -10087,7 +10088,7 @@ const propsMixin$1 = {
   dialogType: PropTypes.commonType(["show", "operation", "confirm", "process"], "dialogType").def("operation"),
   multiInstance: PropTypes.bool.def(true)
 };
-var Component$t = defineComponent({
+var Component$u = defineComponent({
   name: "Modal",
   props: __spreadValues({}, propsMixin$1),
   emits: ["quick-close", "quickClose", "hidden", "shown", "close"],
@@ -10189,7 +10190,7 @@ var Component$t = defineComponent({
     })]);
   }
 });
-const BkModal = withInstallProps(Component$t, { propsMixin: propsMixin$1 }, true);
+const BkModal = withInstallProps(Component$u, { propsMixin: propsMixin$1 }, true);
 const props = __spreadProps(__spreadValues({}, propsMixin$1), {
   width: PropTypes.oneOfType([String, Number]).def(""),
   height: PropTypes.oneOfType([String, Number]).def(""),
@@ -10426,7 +10427,7 @@ var Building = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz
 var empty = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDgwIDI0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwIDI0MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjRmlsbC0xXzFfKTt9Cgkuc3Qxe2ZpbGw6dXJsKCPot6/lvoQtM18xXyk7fQoJLnN0MntmaWxsOnVybCgj5b2i54q257uT5ZCIXzJfKTt9Cgkuc3Qze2ZpbGw6I0M0QzZDQzt9Cjwvc3R5bGU+CjxsaW5lYXJHcmFkaWVudCBpZD0iRmlsbC0xXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjI0MS40NDI3IiB5MT0iODQuOTYwMSIgeDI9IjI0Ny41MTg0IiB5Mj0iNTAuNTAyOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI0MCkiPgoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZCRkNGRCIvPgoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0YwRjJGNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cGF0aCBpZD0iRmlsbC0xIiBjbGFzcz0ic3QwIiBkPSJNMTg4LDE2NC43YzE2LjMtMy43LDM5LjctNS4zLDU1LjYtNC41czI5LjEsMy42LDMwLDIuOWMzLjItMi4xLDEwLTMsOS42LTIuMgoJYy0wLjMsMC44LTQuNywzLjQtMy4zLDMuOGMxLjQsMC40LDE1LjYsMiwyMS41LDMuM2M1LjksMS4yLDkuNywyLjQsMTEsMi40czMuMy0xLjcsMTEuOC0wLjljMC4yLDAuMy0xLjksMC40LTMuOCwxLjQKCXMtMy4zLDAuOS0zLjMsMS4xczEuMS0wLjMsMy4zLDEuMWMyLjIsMS40LDYuMSwxLjksNi4xLDIuMnMtNC45LDItMTMuMi0wLjZjLTIuMS0wLjctNyw1LjEtMjkuNSw2LjdzLTYwLjUsMi45LTYwLjUsMi45CglzMi4zLDIuOSw1LjYsMy44YzAuMiwwLjMtMS4zLDEuNC03LjgsMC4ycy05LjktMy45LTkuOS0zLjlzLTEyLjgtMC44LTE3LjYtMS42cy0xMC40LTIuOS0xNC4yLTMuM2MtMy44LTAuNC0yMS4xLTIuNC0xNC41LTYuOQoJQzE2NC43LDE3Mi41LDE3MS43LDE2OC40LDE4OCwxNjQuN3oiLz4KPGxpbmVhckdyYWRpZW50IGlkPSLot6/lvoQtM18xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI0MTIuNTYwNiIgeTE9Ii0zLjExMzMiIHgyPSI0MTIuNTYwNiIgeTI9Ii0yLjE3NzMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTA1LjYgMCAwIDU2LjMyIC00MzMyNi40MDIzIDI3OC40MDAxKSI+Cgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRTZFOEVCO3N0b3Atb3BhY2l0eTowLjk5MTciLz4KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNENEQ2RDkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHBvbHlnb24gaWQ9Iui3r+W+hC0zIiBjbGFzcz0ic3QxIiBwb2ludHM9IjE4Ny4yLDEzNy42IDIxMC43LDEwMi40IDI2OS4zLDEwMi40IDI5Mi44LDEzNy42IDI5Mi44LDE1OC43IDE4Ny4yLDE1OC43ICIvPgo8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiF8yXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI0MTIuNTYwNiIgeTE9Ii01IiB4Mj0iNDEyLjU2MDYiIHkyPSItNC4wMDc5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEwNS42IDAgMCAzNS4yIC00MzMyNi40MDIzIDMxMy42MDA0KSI+Cgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRURFRkYyIi8+Cgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRThFQUVEIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxwYXRoIGlkPSLlvaLnirbnu5PlkIgiIGNsYXNzPSJzdDIiIGQ9Ik0yMTIuNiwxNzIuOGgtMjMuNGMtMS4xLDAtMi0wLjktMi0ydi0zMy4yaDIzLjRjMS4xLDAsMiwwLjksMiwydjcuNGMwLDEuMSwwLjgsMS45LDEuOSwyCgloMC4xaDUwLjhjMS4xLDAsMS45LTAuOCwyLTEuOVYxNDd2LTcuNGMwLTEuMSwwLjktMiwyLTJoMjMuNHYzMy4yYzAsMS4xLTAuOSwyLTIsMmgtMjMuNEgyMTIuNnoiLz4KPHBhdGggaWQ9IuW9oueKtue7k+WQiF8xXyIgY2xhc3M9InN0MyIgZD0iTTE4Mi40LDE2OS42djhoOHYxLjZoLTkuNnYtOS42SDE4Mi40eiIvPgo8cGF0aCBpZD0i5b2i54q257uT5ZCI5aSH5Lu9IiBjbGFzcz0ic3QzIiBkPSJNMjg5LjYsMTc3LjZoOHYtOGgxLjZ2OS42aC05LjZWMTc3LjZ6Ii8+CjxnIGlkPSLnvJbnu4QtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTEuNjg4ODkwLCAxMS44NzQ5MzYpIHJvdGF0ZSgyMS4wMDAwMDApIHRyYW5zbGF0ZSgtOTEuNjg4ODkwLCAtMTEuODc0OTM2KSB0cmFuc2xhdGUoOTAuODg4ODkwLCAwLjY3NDkzNikiPgoKCQk8cmVjdCBpZD0i55+p5b2iXzFfIiB4PSIxODMuMSIgeT0iMjQuNSIgdHJhbnNmb3JtPSJtYXRyaXgoNS40NDk4OTllLTA2IDEgLTEgNS40NDk4OTllLTA2IDIwOS45Mzc5IC0xNTkuMzkzOCkiIGNsYXNzPSJzdDMiIHdpZHRoPSIzLjIiIGhlaWdodD0iMS42Ii8+CgoJCTxyZWN0IGlkPSLnn6nlvaLlpIfku70tNiIgeD0iMTgzLjEiIHk9IjMwLjkiIHRyYW5zZm9ybT0ibWF0cml4KDUuNDQ5ODk4ZS0wNiAxIC0xIDUuNDQ5ODk4ZS0wNiAyMTYuMzM3OCAtMTUyLjk5MzkpIiBjbGFzcz0ic3QzIiB3aWR0aD0iMy4yIiBoZWlnaHQ9IjEuNiIvPgoKCQk8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTciIHg9IjE4My4xIiB5PSIzNy4zIiB0cmFuc2Zvcm09Im1hdHJpeCg1LjQ0OTg5OGUtMDYgMSAtMSA1LjQ0OTg5OGUtMDYgMjIyLjczNzkgLTE0Ni41OTM5KSIgY2xhc3M9InN0MyIgd2lkdGg9IjMuMiIgaGVpZ2h0PSIxLjYiLz4KCgkJPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS04IiB4PSIxODMuMSIgeT0iNDMuNyIgdHJhbnNmb3JtPSJtYXRyaXgoNS40NDk4OTllLTA2IDEgLTEgNS40NDk4OTllLTA2IDIyOS4xMzc5IC0xNDAuMTkzOSkiIGNsYXNzPSJzdDMiIHdpZHRoPSIzLjIiIGhlaWdodD0iMS42Ii8+CjwvZz4KPGcgaWQ9Iue8lue7hC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNi4wMDAwMDAsIDI3LjIwMDAwMCkgcm90YXRlKC0zMi4wMDAwMDApIHRyYW5zbGF0ZSgtMzYuMDAwMDAwLCAtMjcuMjAwMDAwKSB0cmFuc2xhdGUoMzUuMjAwMDAwLCAxMi44MDAwMDApIj4KCgkJPHJlY3QgaWQ9IuefqeW9ol8yXyIgeD0iOTEuNyIgeT0iMTYxLjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDUuNDI2MzM3ZS0wNiAtNS40MjYzMzdlLTA2IC0xIDE4NS4wNzUzIDMyNS40NDM4KSIgY2xhc3M9InN0MyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSIzLjIiLz4KCgkJPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS0yIiB4PSI5MS43IiB5PSIxNjcuNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgNS40MjYzMzZlLTA2IC01LjQyNjMzNmUtMDYgLTEgMTg1LjA3NTUgMzM4LjI0MzgpIiBjbGFzcz0ic3QzIiB3aWR0aD0iMS42IiBoZWlnaHQ9IjMuMiIvPgoKCQk8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTMiIHg9IjkxLjciIHk9IjE3My45IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSA1LjQyNjMzNmUtMDYgLTUuNDI2MzM2ZS0wNiAtMSAxODUuMDc1NSAzNTEuMDQzOSkiIGNsYXNzPSJzdDMiIHdpZHRoPSIxLjYiIGhlaWdodD0iMy4yIi8+CgoJCTxyZWN0IGlkPSLnn6nlvaLlpIfku70tNCIgeD0iOTEuNyIgeT0iMTgwLjMiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDUuNDI2MzM2ZS0wNiAtNS40MjYzMzZlLTA2IC0xIDE4NS4wNzU1IDM2My44NDM4KSIgY2xhc3M9InN0MyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSIzLjIiLz4KCgkJPHJlY3QgaWQ9IuefqeW9ouWkh+S7vS01IiB4PSI5MS43IiB5PSIxODYuNyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgNS40MjYzMzdlLTA2IC01LjQyNjMzN2UtMDYgLTEgMTg1LjA3NTUgMzc2LjY0MzgpIiBjbGFzcz0ic3QzIiB3aWR0aD0iMS42IiBoZWlnaHQ9IjMuMiIvPgo8L2c+CjxjaXJjbGUgaWQ9IuakreWchuW9oiIgY2xhc3M9InN0MyIgY3g9IjI2OC44IiBjeT0iOTQuNCIgcj0iMS42Ii8+CjxjaXJjbGUgaWQ9IuakreWchuW9ouWkh+S7vSIgY2xhc3M9InN0MyIgY3g9IjIyNy4yIiBjeT0iMTIwIiByPSIxLjYiLz4KPC9zdmc+Cg==";
 var login = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8yXzFfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDgwIDI0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwIDI0MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgj5b2i54q257uT5ZCIXzNfKTt9Cgkuc3Qxe2ZpbGw6dXJsKCPlvaLnirbnu5PlkIhfN18pO30KCS5zdDJ7ZmlsbDojQzRDNkNDO30KCS5zdDN7ZmlsbDp1cmwoI+W9oueKtue7k+WQiF85Xyk7fQoJLnN0NHtmaWxsOnVybCgj5b2i54q257uT5ZCIXzEwXyk7ZmlsbC1vcGFjaXR5OjAuNjt9Cgkuc3Q1e2ZpbGw6dXJsKCPlvaLnirbnu5PlkIhfMTFfKTt9Cgkuc3Q2e2ZpbGw6dXJsKCPot6/lvoQtM18xXyk7fQoJLnN0N3tmaWxsOnVybCgj5b2i54q257uT5ZCIXzEyXyk7fQoJLnN0OHtmaWxsOnVybCgj6Lev5b6ELTNfNF8pO30KCS5zdDl7ZmlsbDp1cmwoI+W9oueKtue7k+WQiF8xM18pO30KCS5zdDEwe2ZpbGw6dXJsKCPlvaLnirbnu5PlkIhfMTVfKTt9Cgkuc3QxMXtmaWxsOiM5NzlCQTU7fQoJLnN0MTJ7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9Cgkuc3QxM3tmaWxsOnVybCgjU1ZHSURfMl8pO30KCS5zdDE0e2ZpbGw6dXJsKCPlvaLnirbnu5PlkIhfMTZfKTt9Cgkuc3QxNXtmaWxsOnVybCgj5b2i54q257uT5ZCI5aSH5Lu9LTJfMl8pO30KCS5zdDE2e2ZpbGw6IzM0MzQzNDtmaWxsLW9wYWNpdHk6MC4xO30KPC9zdHlsZT4KPGcgaWQ9Iumhtemdoi0xIj4KCTxnIGlkPSJFeGNlcHRpb25feDJGX+W8guW4uOaPkOekul94MkZf54Gw55m95a+55q+UIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTI0LjAwMDAwMCwgLTcwNy4wMDAwMDApIj4KCQk8ZyBpZD0i6ZyA6KaB55m75b2VIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjQuMDAwMDAwLCA3MDcuMDAwMDAwKSI+CgoJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLlvaLnirbnu5PlkIhfM18iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAxOS45MDA2IiB5MT0iLTguMzM1NCIgeDI9IjEwMTkuOTAwNiIgeTI9Ii03LjMzNjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMjAwLjAyNTcgMCAwIDU4LjMwNDcgLTIwMzc1OS41NDY5IDY2My45OTQ0KSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRjVGNkY3Ii8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRjdGOUZDIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMzBfIiBjbGFzcz0ic3QwIiBkPSJNMjQ5LjYsMTc4djguN2MwLDIuNSwyLjEsNC42LDQuNiw0LjZzNC41LDEuOSw0LjYsNC40djAuMnYwLjkKCQkJCWMxLjEtMC41LDIuMy0wLjgsMy41LTAuOGM0LjMsMCw3LjgsMy4yLDguNCw3LjNjMS0wLjgsMi4yLTEuMywzLjYtMS4zYzEuMiwwLDIuMywwLjQsMy4yLDFjMi4zLTQuMiw2LjctNywxMS44LTcKCQkJCWM3LjIsMCwxMyw1LjYsMTMuNSwxMi43YzQuOSwwLjcsMTAuMSwxLjUsMTMuMywyLjFjNy4yLDEuNSwxMS44LDMsMTMuNCwzczQtMi4xLDE0LjUtMS4xYzAuMiwwLjQtMi4zLDAuNS00LjcsMS43cy00LDEuMS00LDEuNAoJCQkJczEuMy0wLjQsNCwxLjNzNy41LDIuMyw3LjUsMi44cy02LjEsMi40LTE2LjItMC44Yy0yLjYtMC44LTguNiw2LjItMzYuMSw4LjJjLTI3LjYsMi03NC4yLDMuNS03NC4yLDMuNXMyLjgsMy42LDYuOSw0LjYKCQkJCWMwLjIsMC40LTEuNiwxLjctOS42LDAuMmMtNy45LTEuNS0xMi4yLTQuOC0xMi4yLTQuOHMtMTUuNy0xLTIxLjYtMmMtNS45LTEtMTIuNy0zLjUtMTcuNC00cy0yNS45LTMtMTcuOC04LjUKCQkJCWMwLDAsNy4yLTQuMiwyMy42LTguM2MyLTMuNSw1LjctNS45LDEwLjEtNS45YzIuNywwLDUuMiwwLjksNy4xLDIuNWMxLjQtMC4yLDIuOS0wLjQsNC40LTAuNmMxLjItMS4xLDIuOC0xLjgsNC41LTEuOAoJCQkJYzEuMiwwLDIuMywwLjMsMy4yLDAuOWwwLjUtMC4xYzEtMy45LDQuNS02LjgsOC43LTYuOGMyLjgsMCw1LjQsMS4zLDcsMy4zdi0yLjhjMC0yLjksMi40LTUuMyw1LjMtNS4zYzIuOCwwLDUuMi0yLjIsNS4zLTUuMQoJCQkJdi0wLjJ2LThMMjQ5LjYsMTc4TDI0OS42LDE3OHoiLz4KCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiF83XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAzLjIzODQiIHkxPSItNDMuNjgxOCIgeDI9IjEwMDMuOTQ2MSIgeTI9Ii00My42ODE4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDQ0IDAgMCAxMSAtNDM5MTkuMTk5MiA2NTUuNSkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UyRTNFNiIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMC40NTQzIiBzdHlsZT0ic3RvcC1jb2xvcjojRUNFRUYwIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTJFNEU2Ii8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMjlfIiBjbGFzcz0ic3QxIiBkPSJNMjE2LjgsMTY5LjVoNDR2NmMwLDIuOC05LjgsNS0yMiw1cy0yMi0yLjItMjItNWwwLDBMMjE2LjgsMTY5LjVMMjE2LjgsMTY5LjV6Ii8+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIjlpIfku71fMV8iIGNsYXNzPSJzdDIiIGQ9Ik0yMTYuOCwxNjVoNDR2NmMwLDIuOC05LjgsNS0yMiw1cy0yMi0yLjItMjItNWwwLDBMMjE2LjgsMTY1TDIxNi44LDE2NXoiLz4KCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiF85XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI5NDcuNDg4OCIgeTE9Ii04LjM4NDgiIHgyPSI5NDguMTg2MyIgeTI9Ii04LjM4NDgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTIgMCAwIDU0LjcgLTExMTc3LjIwMDIgNTgxLjI5OTEpIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMUYzRjUiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjAuNDU3NiIgc3R5bGU9InN0b3AtY29sb3I6I0Y0RjVGNyIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDRUVGMCIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBpZD0i5b2i54q257uT5ZCIXzI4XyIgY2xhc3M9InN0MyIgZD0iTTE5Ni44LDk1LjNjMS44LDAsNiw4LjMsNiwxMS43bDAsMHY0M2gtMTJ2LTQzdi0wLjJDMTkwLjksMTAzLjQsMTk1LDk1LjMsMTk2LjgsOTUuMwoJCQkJeiIvPgoKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i5b2i54q257uT5ZCIXzEwXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI5NDcuODQ2NCIgeTE9Ii0xOS44MjgyIiB4Mj0iOTQ3LjgyNyIgeTI9Ii0xOS42NDE4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEyIDAgMCAyNC4yIC0xMTA5My4yMDAyIDYwMi45OTkzKSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0REMEQyO3N0b3Atb3BhY2l0eTowIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0REMEQyIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwb2x5Z29uIGlkPSLlvaLnirbnu5PlkIhfMjZfIiBjbGFzcz0ic3Q0IiBwb2ludHM9IjI3NC44LDExNyAyNzQuOCwxMzIuNiAyNzkuNywxNDEuMiAyODYuOCwxMzUuNCAyODYuOCwxMjYgCQkJIi8+CgoJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLlvaLnirbnu5PlkIhfMTFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ijk0OC4xNzE2IiB5MT0iLTguMzg0OCIgeDI9Ijk0Ny40NzQxIiB5Mj0iLTguMzg0OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxMiAwIDAgNTQuNyAtMTEwOTMuMjAwMiA1ODEuMjk5MSkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0YxRjNGNSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMC40NTc2IiBzdHlsZT0ic3RvcC1jb2xvcjojRjRGNUY3Ii8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUNFRUYwIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMjVfIiBjbGFzcz0ic3Q1IiBkPSJNMjgwLjgsOTUuM2MtMS44LDAtNiw4LjMtNiwxMS43bDAsMHY0M2gxMnYtNDN2LTAuMgoJCQkJQzI4Ni42LDEwMy40LDI4Mi41LDk1LjMsMjgwLjgsOTUuM3oiLz4KCQkJPGcgaWQ9Iue8lue7hF8zXyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAuNzYwNDk5LCA3Ny4wMDAwMDApIj4KCgkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLot6/lvoQtM18xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1MTQuMzE0MSIgeTE9Ii02Ljg5MDUiIHgyPSI1MTQuMzk0MyIgeTI9Ii02LjUyMDQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMzYgMCAwIDY2IC0xODM5NS43MzI0IDUwNikiPgoJCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFOEU5RUIiLz4KCQkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRDdEOERCIi8+CgkJCQk8L2xpbmVhckdyYWRpZW50PgoJCQkJPHBhdGggaWQ9Iui3r+W+hC0zXzNfIiBjbGFzcz0ic3Q2IiBkPSJNMTM1LDIwYy0xLjQsNy00LjUsMTMuMy05LjQsMTkuMWMtNy4zLDguNy0xNS4yLDEzLjYtMTguNCwyMy44CgkJCQkJYy0yLjEsNi44LTMuMiwxMi45LTMuMiwxOC4zbDMyLjEsNC44bDMuOS00LjhMMTM1LDIweiIvPgoKCQkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiF8xMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDY5LjEyNSIgeTE9Ii02Ljk4IiB4Mj0iNDY5LjEyNjMiIHkyPSItNi45NjgxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEzIDAgMCA2NC41IC01OTY1LjY4MTYgNTA3LjUpIj4KCQkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRUJFREVGO3N0b3Atb3BhY2l0eTowIi8+CgkJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0M4Q0FDQyIvPgoJCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMjRfIiBjbGFzcz0ic3Q3IiBkPSJNMTM1LjIsMjEuNWw0LjgsNTkuN2wtMy45LDQuOGwtOS4xLTEuNGwzLjMtNTIuMmMyLTMuNSwzLjQtNy4xLDQuNC0xMC45CgkJCQkJQzEzNC43LDIxLjUsMTM1LjIsMjEuNSwxMzUuMiwyMS41eiIvPgoJCQk8L2c+CgoJCQkJPGcgaWQ9Iue8lue7hF8yXyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcxLjAwMDAwMCwgMTEwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMTcxLjAwMDAwMCwgLTExMC4wMDAwMDApIHRyYW5zbGF0ZSgxNTMuMDAwMDAwLCA3Ny4wMDAwMDApIj4KCgkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLot6/lvoQtM180XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIyNi4xMTk1IiB5MT0iLTYuNzUwNiIgeDI9IjI2LjE5OTgiIHkyPSItNi4zODA1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDM2IDAgMCA2NiAtMTAyNCA1MDYpIj4KCQkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRThFOUVCIi8+CgkJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q3RDhEQiIvPgoJCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJCTxwYXRoIGlkPSLot6/lvoQtM18yXyIgY2xhc3M9InN0OCIgZD0iTS03MywyMGMtMS40LDctNC41LDEzLjMtOS40LDE5LjFjLTcuMyw4LjctMTUuMiwxMy42LTE4LjQsMjMuOAoJCQkJCWMtMi4xLDYuOC0zLjIsMTIuOS0zLjIsMTguM2wzMi4xLDQuOGwzLjktNC44TC03MywyMHoiLz4KCQkJPC9nPgoKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i5b2i54q257uT5ZCIXzEzXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI2NTkuNjQ1MyIgeTE9Ii02Ljk4IiB4Mj0iNjU5LjY0NjUiIHkyPSItNi45NjgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEzIDAgMCA2NC41IDg4MzkuMjE0OCA1ODQuNSkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0VCRURFRjtzdG9wLW9wYWNpdHk6MCIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0M4Q0FDQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBpZD0i5b2i54q257uT5ZCIXzJfIiBjbGFzcz0ic3Q5IiBkPSJNMjYxLjYsOTguNWwtNC44LDU5LjdsMy45LDQuOGw5LjEtMS40bC0zLjMtNTIuMmMtMi0zLjUtMy40LTcuMS00LjQtMTAuOQoJCQkJQzI2Mi4xLDk4LjUsMjYxLjYsOTguNSwyNjEuNiw5OC41eiIvPgoKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i5b2i54q257uT5ZCIXzE1XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDA0Ljk4MTEiIHkxPSItMi42NTU4IiB4Mj0iMTAwNS42ODg3IiB5Mj0iLTIuNjU1OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCg0OCAwIDAgMTU0IC00ODAxNy4xOTkyIDUwNikiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0VBRUJFRCIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMC40NTQzIiBzdHlsZT0ic3RvcC1jb2xvcjojRjRGNUY3Ii8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUVGMEYyIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMThfIiBjbGFzcz0ic3QxMCIgZD0iTTIzOC44LDIwYzcsMCwyNCwyNy43LDI0LDQxbDAsMHYxMDZjMCwwLjEsMCwwLjIsMCwwLjNzMCwwLjIsMCwwLjIKCQkJCWMwLDMuNi0xMC43LDYuNS0yNCw2LjVzLTI0LTIuOS0yNC02LjVjMC0wLjEsMC0wLjIsMC0wLjJjMC0wLjEsMC0wLjIsMC0wLjNWNjF2LTAuNEMyMTUuMSw0Ny4yLDIzMS44LDIwLDIzOC44LDIweiIvPgoJCQk8Zz4KCQkJCTxjaXJjbGUgaWQ9IuakreWchuW9ol83XyIgY2xhc3M9InN0MTEiIGN4PSIyMzguOCIgY3k9IjcxIiByPSI5LjUiLz4KCgkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI5NzYuMDc5IiB5MT0iLTI1LjMzMzQiIHgyPSI5NzYuMDc5IiB5Mj0iLTI0LjgyNDQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMTkgMCAwIDE5IC0xODMwNi42OTkyIDU0Ny41KSI+CgkJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UxRTJFNiIvPgoJCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMEYyRjUiLz4KCQkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCQk8cGF0aCBjbGFzcz0ic3QxMiIgZD0iTTIzOC44LDgxYy01LjUsMC0xMC00LjUtMTAtMTBzNC41LTEwLDEwLTEwczEwLDQuNSwxMCwxMFMyNDQuMyw4MSwyMzguOCw4MXogTTIzOC44LDYyYy01LDAtOSw0LTksOQoJCQkJCXM0LDksOSw5czktNCw5LTlTMjQzLjgsNjIsMjM4LjgsNjJ6Ii8+CgkJCTwvZz4KCQkJPGc+CgkJCQk8Y2lyY2xlIGlkPSLmpK3lnIblvaLlpIfku70tMTFfMV8iIGNsYXNzPSJzdDExIiBjeD0iMjM4LjgiIGN5PSI4OSIgcj0iMy41Ii8+CgoJCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iODkzLjA3MTUiIHkxPSItNjkuMjA0OCIgeDI9Ijg5My4wNzE1IiB5Mj0iLTY4LjY1MjIiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNyAwIDAgNyAtNjAxMi43MDAyIDU3MS41KSI+CgkJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UxRTJFNiIvPgoJCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMEYyRjUiLz4KCQkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCQk8cGF0aCBjbGFzcz0ic3QxMyIgZD0iTTIzOC44LDkzYy0yLjIsMC00LTEuOC00LTRzMS44LTQsNC00czQsMS44LDQsNFMyNDEsOTMsMjM4LjgsOTN6IE0yMzguOCw4NmMtMS43LDAtMywxLjMtMywzczEuMywzLDMsMwoJCQkJCXMzLTEuMywzLTNTMjQwLjUsODYsMjM4LjgsODZ6Ii8+CgkJCTwvZz4KCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiF8xNl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwNC45ODExIiB5MT0iLTcwLjk3MDYiIHgyPSIxMDA1LjY4NTQiIHkyPSItNzAuOTcwNiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCg0OCAwIDAgNi44IC00ODAxNy4xOTkyIDYyNC4wMDA0KSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRTJFM0U2Ii8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwLjQ3NjYiIHN0eWxlPSJzdG9wLWNvbG9yOiNGQkZERkYiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMkU0RTYiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggaWQ9IuW9oueKtue7k+WQiF8xNF8iIGNsYXNzPSJzdDE0IiBkPSJNMjYyLjgsMTM4djIuNWMtMy45LDIuNS0xMy4yLDQuMy0yNCw0LjNzLTIwLjEtMS44LTI0LTQuM1YxMzhsMCwwCgkJCQljMC42LDIuOCwxMS4xLDUuNSwyNCw1LjVTMjYyLjIsMTQwLjgsMjYyLjgsMTM4TDI2Mi44LDEzOHoiLz4KCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuW9oueKtue7k+WQiOWkh+S7vS0yXzJfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEwMDQuOTgxMSIgeTE9Ii03MC45NzA2IiB4Mj0iMTAwNS42ODU0IiB5Mj0iLTcwLjk3MDYiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNDggMCAwIDYuOCAtNDgwMTcuMTk5MiA2MjkuMDAwNCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UyRTNFNiIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMC40NzY2IiBzdHlsZT0ic3RvcC1jb2xvcjojRkJGREZGIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTJFNEU2Ii8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIjlpIfku70tMl8xXyIgY2xhc3M9InN0MTUiIGQ9Ik0yNjIuOCwxNDN2Mi41Yy0zLjksMi41LTEzLjIsNC4zLTI0LDQuM3MtMjAuMS0xLjgtMjQtNC4zVjE0M2wwLDAKCQkJCWMwLjYsMi44LDExLjEsNS41LDI0LDUuNVMyNjIuMiwxNDUuOCwyNjIuOCwxNDNMMjYyLjgsMTQzeiIvPgoJCQk8cGF0aCBpZD0i5b2i54q257uT5ZCIXzhfIiBjbGFzcz0ic3QxNiIgZD0iTTI2Mi44LDczYzQzLjItOC42LDc3LjEtNi4zLDgwLjksNi43YzQuNiwxNS45LTM3LjQsNDEuOS05My42LDU4LjEKCQkJCXMtMTA1LjYsMTYuMy0xMTAuMiwwLjRjLTQtMTQuMSwyOC40LTM2LjEsNzQuOS01Mi4xdjEuMWMtNDUuOCwxNS45LTc3LjcsMzcuNS03My45LDUwLjhjNC4zLDE1LjEsNTMuMiwxNC45LDEwOC45LTEuMQoJCQkJczk3LjMtNDEuNyw5Mi45LTU2LjhjLTMuNS0xMi40LTM3LjItMTQuNS03OS45LTZWNzNMMjYyLjgsNzN6Ii8+CgkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMV8iIGNsYXNzPSJzdDE2IiBkPSJNMTA1LjIsNzZjMy44LTE0LDUwLjctMTQsMTA5LjUtMS4xdjFjLTU4LjMtMTIuOC0xMDUtMTIuOS0xMDguNiwwLjMKCQkJCWMtNCwxNS4xLDQ5LjEsNDMuMiwxMTguNSw2MS44czEyOS41LDIwLjksMTMzLjYsNS44YzMuNi0xMy40LTM3LjctMzctOTUuNi01NS4xdi0xLjFjNTguNiwxOC4zLDEwMC4zLDQyLjIsOTYuNSw1Ni40CgkJCQljLTQuMywxNi02NC42LDEzLjctMTM0LjgtNS4xUzEwMSw5MiwxMDUuMiw3NnoiLz4KCQkJPGNpcmNsZSBpZD0i5qSt5ZyG5b2iXzZfIiBjbGFzcz0ic3QyIiBjeD0iMzE3LjgiIGN5PSIxMDkiIHI9IjIiLz4KCQkJPGNpcmNsZSBpZD0i5qSt5ZyG5b2iXzVfIiBjbGFzcz0ic3QyIiBjeD0iMTE3LjMiIGN5PSIxMjEuNSIgcj0iMS41Ii8+CgkJCTxjaXJjbGUgaWQ9IuakreWchuW9ol80XyIgY2xhc3M9InN0MiIgY3g9IjI4MS44IiBjeT0iNTgiIHI9IjEiLz4KCQkJPGNpcmNsZSBpZD0i5qSt5ZyG5b2iXzNfIiBjbGFzcz0ic3QyIiBjeD0iMTkxLjgiIGN5PSIxNjQiIHI9IjEiLz4KCQkJPGNpcmNsZSBpZD0i5qSt5ZyG5b2iXzFfIiBjbGFzcz0ic3QyIiBjeD0iMzUxLjgiIGN5PSIxNTAiIHI9IjIiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==";
 var searchEmpty = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDgwIDI0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwIDI0MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjRmlsbC0xXzFfKTt9Cgkuc3Qxe2ZpbGw6I0M0QzZDQzt9Cgkuc3Qye2ZpbGw6dXJsKCPnn6nlvaItMl8xXyk7fQoJLnN0M3tmaWxsOnVybCgj55+p5b2iXzZfKTt9Cgkuc3Q0e2ZpbGw6I0RDREVFMDt9Cgkuc3Q1e2ZpbGw6I0QxRDNENjt9Cgkuc3Q2e2ZpbGw6dXJsKCPnn6nlvaItM18xXyk7fQoJLnN0N3tmaWxsOiNFNUU3RUM7fQoJLnN0OHtmaWxsOiNEQ0RERTA7fQoJLnN0OXtmaWxsOnVybCgj6Lev5b6ELTEzXzFfKTt9Cgkuc3QxMHtmaWxsOnVybCgj5qSt5ZyG5b2iXzNfKTtzdHJva2U6dXJsKCPmpK3lnIblvaJfNF8pO30KCS5zdDExe2ZpbGw6dXJsKCPmpK3lnIblvaJfNV8pO3N0cm9rZTp1cmwoI+akreWchuW9ol82Xyk7fQoJLnN0MTJ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGcgaWQ9Iumhtemdoi0xIj4KCTxnIGlkPSJFeGNlcHRpb25feDJGX+W8guW4uOaPkOekuiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg2OS4wMDAwMDAsIC0yOTE4LjAwMDAwMCkiPgoJCTxnIGlkPSLmkJzntKLkuLrnqboiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg2OS4wMDAwMDAsIDI5MTguMDAwMDAwKSI+CgkJCTxsaW5lYXJHcmFkaWVudCBpZD0iRmlsbC0xXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjI0My4wNDY0IiB5MT0iMTY3Ljk3OTMiIHgyPSIyNDUuODA3MSIgeTI9IjE5NC4yNDU2Ij4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGQkZDRkQiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMkY0RjciLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggaWQ9IkZpbGwtMSIgY2xhc3M9InN0MCIgZD0iTTE5My4xLDE3NC4yYzE0LjgtMy4zLDM2LTQuOCw1MC41LTQuMWMxNC40LDAuNywyNi40LDMuMywyNy4zLDIuN2MyLjktMS45LDktMi44LDguNy0yCgkJCQljLTAuMywwLjctNC4zLDMuMS0zLDMuNGMxLjMsMC40LDE0LjEsMS45LDE5LjUsM2M1LjMsMS4xLDguOCwyLjIsOS45LDIuMmMxLjIsMCwzLTEuNiwxMC43LTAuOGMwLjEsMC4zLTEuNywwLjQtMy40LDEuMwoJCQkJYy0xLjcsMC45LTMsMC44LTMsMXMxLTAuMywzLDFzNS41LDEuNyw1LjUsMnMtNC41LDEuOC0xMi0wLjZjLTEuOS0wLjYtNi4zLDQuNi0yNi44LDYuMXMtNTUsMi42LTU1LDIuNnMyLjEsMi43LDUuMSwzLjQKCQkJCWMwLjIsMC4zLTEuMiwxLjMtNy4xLDAuMmMtNS45LTEuMS05LTMuNi05LTMuNnMtMTEuNi0wLjctMTYtMS41Yy00LjQtMC43LTkuNC0yLjYtMTIuOS0zcy0xOS4yLTIuMi0xMy4yLTYuMwoJCQkJQzE3MiwxODEuMiwxNzguMywxNzcuNSwxOTMuMSwxNzQuMnoiLz4KCQkJPHBhdGggaWQ9IuW9oueKtue7k+WQiCIgY2xhc3M9InN0MSIgZD0iTTE5My4xLDE3Ny40djkuNGg5LjR2MS45aC0xMS4ydi0xMS4yTDE5My4xLDE3Ny40TDE5My4xLDE3Ny40eiIvPgoJCQk8cGF0aCBpZD0i5b2i54q257uT5ZCI5aSH5Lu9IiBjbGFzcz0ic3QxIiBkPSJNMjAwLjYsNjQuOWgtOS40djkuNGgtMS45di05LjRsMCwwVjYzaDExLjJMMjAwLjYsNjQuOUwyMDAuNiw2NC45eiIvPgoJCQk8cGF0aCBpZD0i5b2i54q257uT5ZCI5aSH5Lu9LTIiIGNsYXNzPSJzdDEiIGQ9Ik0yODguOCw3NC4ydi05LjRoLTkuNFY2M2g5LjRsMCwwaDEuOXYxMS4ySDI4OC44eiIvPgoKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i55+p5b2iLTJfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDExLjY3NjgiIHkxPSItMS42MDY2IiB4Mj0iNDExLjY3NjgiIHkyPSItMC42NzA3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDg2LjI1IDAgMCAxMDguNzUgLTM1MjY3LjEyNSAyNDYuNSkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0VCRURGMDtzdG9wLW9wYWNpdHk6MC45OTE3Ii8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTFFM0U2Ii8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIGlkPSLnn6nlvaItMiIgY2xhc3M9InN0MiIgZD0iTTE5Ny45LDcwLjVoODQuMmMwLjYsMCwxLDAuNCwxLDF2MTA2LjhjMCwwLjYtMC40LDEtMSwxaC04NC4yYy0wLjYsMC0xLTAuNC0xLTFWNzEuNQoJCQkJQzE5Ni45LDcwLjksMTk3LjMsNzAuNSwxOTcuOSw3MC41eiIvPgoKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i55+p5b2iXzZfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjQxMC42NjE0IiB5MT0iLTEuODc3MyIgeDI9IjQxMC42NjE0IiB5Mj0iLTAuODg4OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCg3MS4yNSAwIDAgOTMuNzUgLTI5MDE5LjYyNSAyNTQpIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMkY0RjciLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHJlY3QgaWQ9IuefqeW9ol8xXyIgeD0iMjA0LjQiIHk9Ijc4IiBjbGFzcz0ic3QzIiB3aWR0aD0iNzEuMiIgaGVpZ2h0PSI5My44Ii8+CgkJCTxyZWN0IGlkPSLnn6nlvaJfMl8iIHg9IjIxOS40IiB5PSI4MS44IiBjbGFzcz0ic3Q0IiB3aWR0aD0iNDEuMiIgaGVpZ2h0PSIxLjkiLz4KCQkJPHJlY3QgaWQ9IuefqeW9ol8zXyIgeD0iMjA0LjQiIHk9IjE3MS44IiBjbGFzcz0ic3Q1IiB3aWR0aD0iNzEuMiIgaGVpZ2h0PSIxLjkiLz4KCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IuefqeW9oi0zXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjQwNi40MTUyIiB5MT0iLTExLjczMzQiIHgyPSI0MDYuNDE1MiIgeTI9Ii0xMC43NDEzIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDQxLjI1IDAgMCAxNSAtMTY1MjQuNjI1IDI0Mi43NSkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0VERUZGMiIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0U4RUFFRCIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cmVjdCBpZD0i55+p5b2iLTMiIHg9IjIxOS40IiB5PSI2Ni44IiBjbGFzcz0ic3Q2IiB3aWR0aD0iNDEuMiIgaGVpZ2h0PSIxNSIvPgoJCQk8ZyBpZD0i57yW57uELTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyMy4xMjUwMDAsIDk4LjYyNTAwMCkiPgoJCQkJPHJlY3QgaWQ9IuefqeW9ol80XyIgY2xhc3M9InN0MSIgd2lkdGg9IjMuOCIgaGVpZ2h0PSIxLjkiLz4KCQkJCTxyZWN0IGlkPSLnn6nlvaLlpIfku70iIHg9IjcuNSIgY2xhc3M9InN0MSIgd2lkdGg9IjMuOCIgaGVpZ2h0PSIxLjkiLz4KCQkJCTxyZWN0IGlkPSLnn6nlvaLlpIfku70tMiIgeD0iMTUiIGNsYXNzPSJzdDEiIHdpZHRoPSIzLjgiIGhlaWdodD0iMS45Ii8+CgkJCQk8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTMiIHg9IjIyLjUiIGNsYXNzPSJzdDEiIHdpZHRoPSIzLjgiIGhlaWdodD0iMS45Ii8+CgkJCQk8cmVjdCBpZD0i55+p5b2i5aSH5Lu9LTQiIHg9IjMwIiBjbGFzcz0ic3QxIiB3aWR0aD0iMy44IiBoZWlnaHQ9IjEuOSIvPgoJCQk8L2c+CgkJCTxnIGlkPSLnvJbnu4QtNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjI4Ljc1MDAwMCwgMTEzLjYyNTAwMCkiPgoJCQkJPGNpcmNsZSBpZD0i5qSt5ZyG5b2iIiBjbGFzcz0ic3Q3IiBjeD0iMjQuNCIgY3k9IjI2LjIiIHI9IjI0LjQiLz4KCQkJCTxwYXRoIGlkPSLot6/lvoQtMTIiIGNsYXNzPSJzdDciIGQ9Ik0zOSw0NWwzLjEsMy4yYy0wLjYsMC44LTAuNiwxLjUsMCwyLjJzMi4yLDIuNSw0LjcsNS4zdi03LjVsLTYuMS01TDM5LDQ1eiIvPgoKCQkJCQk8ZyBpZD0i57yW57uELTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjIyNjMxNywgNTEuNzA5MDc3KSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC01MC4yMjYzMTcsIC01MS43MDkwNzcpIHRyYW5zbGF0ZSg0NC42MDEzMTcsIDM2LjcwOTA3NykiPgoKCQkJCQkJPHJlY3QgaWQ9IuefqeW9ol81XyIgeD0iMy44IiB5PSIwIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSA1LjA3MDM2M2UtMDYgLTUuMDcwMzYzZS0wNiAtMSAxMS40IDkuMzUpIiBjbGFzcz0ic3Q4IiB3aWR0aD0iMy43IiBoZWlnaHQ9IjkuNCIvPgoKCQkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLot6/lvoQtMTNfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTEwOS4zOTE1IiB5MT0iLTU1LjkzODMiIHgyPSItMTA5LjU1NzgiIHkyPSItNTUuODkwNSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCg5LjIxMjkgMCAwIDIyLjUgMTAxMy45Mjg1IDEyNzcuMjgxKSI+CgkJCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNEN0Q4REIiLz4KCQkJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0JFQkZDMiIvPgoJCQkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCQkJPHBhdGggaWQ9Iui3r+W+hC0xMyIgY2xhc3M9InN0OSIgZD0iTTMuNyw1LjdoNGMwLjUsMCwxLDAuNCwxLDAuOWwxLjUsMjAuNWMwLDAuNi0wLjQsMS0wLjksMS4xYzAsMCwwLDAtMC4xLDBIMgoJCQkJCQljLTAuNiwwLTEtMC40LTEtMXYtMC4xTDIuNyw2LjZDMi43LDYuMSwzLjIsNS43LDMuNyw1Ljd6Ii8+CgkJCQk8L2c+CgkJCQk8ZyBpZD0i57yW57uELTUiPgoKCQkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLmpK3lnIblvaJfM18iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTQ5LjcxMTUiIHkxPSItMy42ODU5IiB4Mj0iLTQ5LjcxMTUiIHkyPSItMi42ODU5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDQ3Ljc1IDAgMCA0Ny43NSAyMzk4LjEyNSAxNzYuNSkiPgoJCQkJCQk8c3RvcCAgb2Zmc2V0PSIxLjUzMDgyOGUtMDMiIHN0eWxlPSJzdG9wLWNvbG9yOiNERERFRTAiLz4KCQkJCQkJPHN0b3AgIG9mZnNldD0iMC45OTgiIHN0eWxlPSJzdG9wLWNvbG9yOiNDM0M1QzciLz4KCQkJCQk8L2xpbmVhckdyYWRpZW50PgoKCQkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLmpK3lnIblvaJfNF8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTQ5LjcxMTUiIHkxPSItMy42ODU4IiB4Mj0iLTQ5LjcxMTUiIHkyPSItMi43MDU0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDQ3Ljc1IDAgMCA0Ny43NSAyMzk4LjEyNSAxNzYuNSkiPgoJCQkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRERERUUwIi8+CgkJCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNCRUMwQzIiLz4KCQkJCQk8L2xpbmVhckdyYWRpZW50PgoJCQkJCTxjaXJjbGUgaWQ9IuakreWchuW9ol8xXyIgY2xhc3M9InN0MTAiIGN4PSIyNC40IiBjeT0iMjQuNCIgcj0iMjMuOSIvPgoKCQkJCQkJPGxpbmVhckdyYWRpZW50IGlkPSLmpK3lnIblvaJfNV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTUyLjM5NjYiIHkxPSItNC44MjIiIHgyPSItNTIuMzk2NiIgeTI9Ii0zLjgzOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgzNi41IDAgMCAzNi41IDE5MzYuODc1IDE4Mi4xMjUpIj4KCQkJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZFRkVGRSIvPgoJCQkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRjJGNEY3Ii8+CgkJCQkJPC9saW5lYXJHcmFkaWVudD4KCgkJCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0i5qSt5ZyG5b2iXzZfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ii01Mi4zOTY2IiB5MT0iLTQuODIyIiB4Mj0iLTUyLjM5NjYiIHkyPSItMy44Mzk4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDM2LjUgMCAwIDM2LjUgMTkzNi44NzUgMTgyLjEyNSkiPgoJCQkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRjNGNEY1Ii8+CgkJCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGM0Y1RjciLz4KCQkJCQk8L2xpbmVhckdyYWRpZW50PgoJCQkJCTxjaXJjbGUgaWQ9IuakreWchuW9ol8yXyIgY2xhc3M9InN0MTEiIGN4PSIyNC40IiBjeT0iMjQuNCIgcj0iMTguMiIvPgoJCQkJCTxwYXRoIGlkPSLlvaLnirbnu5PlkIhfMV8iIGNsYXNzPSJzdDEyIiBkPSJNMjMuNSwxMi4zYzUuOCwwLDEwLjksMy4zLDEzLjQsOC4yYy0yLjUtMS42LTUuNS0yLjYtOC43LTIuNmMtNCwwLTcuNywxLjUtMTAuNSw0CgkJCQkJCUwxNCwxNS43QzE2LjYsMTMuNiwxOS45LDEyLjMsMjMuNSwxMi4zeiIvPgoJCQkJPC9nPgoJCQkJPHBvbHlnb24gaWQ9Iui3r+W+hC0xNCIgY2xhc3M9InN0NSIgcG9pbnRzPSI0Ni45LDUzLjQgNDYuOSw1NS42IDU0LjQsNjQuNCA1NC40LDYyLjMgCQkJCSIvPgoJCQk8L2c+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=";
-var Component$s = defineComponent({
+var Component$t = defineComponent({
   name: "Exception",
   props: {
     type: PropTypes.commonType(["404", "403", "500", "building", "empty", "search-empty", "login"], "type").def("404"),
@@ -10470,8 +10471,8 @@ var Component$s = defineComponent({
     };
   }
 });
-const BkException = withInstall(Component$s);
-var Component$r = defineComponent({
+const BkException = withInstall(Component$t);
+var Component$s = defineComponent({
   name: "FixedNavbar",
   props: {
     navItems: PropTypes.array.def([]),
@@ -10512,8 +10513,8 @@ var Component$r = defineComponent({
     }, [item.text]) : ""]))]);
   }
 });
-const BkFixedNavbar = withInstall(Component$r);
-var Component$q = defineComponent({
+const BkFixedNavbar = withInstall(Component$s);
+var Component$r = defineComponent({
   name: "Link",
   props: {
     theme: PropTypes.theme(["danger", "success", "primary", "warning", "default"]).def("default"),
@@ -10550,7 +10551,7 @@ var Component$q = defineComponent({
     }, [createVNode("span", null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
   }
 });
-const BkLink = withInstall(Component$q);
+const BkLink = withInstall(Component$r);
 const placements$1 = ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
 const EventProps$2 = {
   onAfterHidden: Function,
@@ -10593,7 +10594,7 @@ const PopoverProps$1 = __spreadValues({
     PropTypes.string
   ]).def([])
 }, EventProps$2);
-var Component$p = defineComponent({
+var Component$q = defineComponent({
   name: "Popover",
   props: PopoverProps$1,
   emits: ["afterHidden", "afterShow", "update:isShow"],
@@ -10743,7 +10744,7 @@ var Component$p = defineComponent({
     };
   }
 });
-const BkPopover = withInstall(Component$p);
+const BkPopover = withInstall(Component$q);
 var _populated = false;
 var _ie, _firefox, _opera, _webkit, _chrome;
 var _ie_real_version;
@@ -12875,7 +12876,7 @@ var usePopperId = (props2, prefix = "#") => {
     resetFullscreenElementTag
   };
 };
-var Component$o = defineComponent({
+var Component$p = defineComponent({
   name: "Popover2",
   components: {
     Content,
@@ -13077,7 +13078,7 @@ var Component$o = defineComponent({
     });
   }
 });
-const BkPopover2 = withInstall(Component$o);
+const BkPopover2 = withInstall(Component$p);
 const Circle = (_2, {
   attrs,
   slots
@@ -13200,7 +13201,7 @@ const Line = (_2, {
 function _isSlot$6(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
-var Component$n = defineComponent({
+var Component$o = defineComponent({
   name: "Progress",
   props: {
     extCls: PropTypes.string,
@@ -13278,7 +13279,7 @@ var Component$n = defineComponent({
     return createVNode("div", progressProps, [progress2]);
   }
 });
-const BkProgress = withInstall(Component$n);
+const BkProgress = withInstall(Component$o);
 const radioGroupKey = Symbol("RadioGroup");
 function useFocus() {
   const isFocused = ref(false);
@@ -13375,7 +13376,7 @@ const radioProps = {
   checked: PropTypes.bool.def(false),
   disabled: PropTypes.bool.def(false)
 };
-var Component$m = defineComponent({
+var Component$n = defineComponent({
   name: "Radio",
   props: radioProps,
   emits: ["change", "update:modelValue"],
@@ -13536,7 +13537,7 @@ var RadioGroup = defineComponent({
     }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
-const BkRadio = withInstallProps(Component$m, { Group: RadioGroup, Button: RadioButton });
+const BkRadio = withInstallProps(Component$n, { Group: RadioGroup, Button: RadioButton });
 var star = defineComponent({
   name: "Star",
   props: {
@@ -13598,7 +13599,7 @@ var star = defineComponent({
     }, null)])])])])]))]);
   }
 });
-var Component$l = defineComponent({
+var Component$m = defineComponent({
   name: "Rate",
   components: {
     star
@@ -13673,8 +13674,8 @@ var Component$l = defineComponent({
     }, commonAttrs), null)]]);
   }
 });
-const BkRate = withInstall(Component$l);
-var Component$k = defineComponent({
+const BkRate = withInstall(Component$m);
+var Component$l = defineComponent({
   name: "Swiper",
   props: {
     isLoop: PropTypes.bool.def(true),
@@ -13833,7 +13834,7 @@ var Component$k = defineComponent({
     }, null)])]);
   }
 });
-const BkSwiper = withInstall(Component$k);
+const BkSwiper = withInstall(Component$l);
 const selectKey = Symbol("BkSelect");
 const optionGroupKey = Symbol("BkOptionGroup");
 function useHover() {
@@ -13976,6 +13977,7 @@ var BkOption = defineComponent({
     });
     const multiple = computed(() => select2 == null ? void 0 : select2.multiple);
     const isHover = computed(() => (select2 == null ? void 0 : select2.activeOptionValue) === value.value);
+    const showSelectedIcon = computed(() => select2 == null ? void 0 : select2.showSelectedIcon);
     const handleOptionClick = () => {
       if (disabled.value)
         return;
@@ -13996,6 +13998,7 @@ var BkOption = defineComponent({
       selected,
       multiple,
       isHover,
+      showSelectedIcon,
       handleOptionClick,
       handleMouseEnter
     });
@@ -14016,11 +14019,11 @@ var BkOption = defineComponent({
     }, [(_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode("span", {
       "class": "bk-select-option-item",
       "title": this.label
-    }, [this.label, this.multiple && this.selected && createVNode(done, {
-      "class": "done-icon",
+    }, [this.label]), this.multiple && this.selected && this.showSelectedIcon && createVNode(done, {
+      "class": "bk-select-selected-icon",
       "width": 22,
       "height": 22
-    }, null)])]), [[vShow, this.visible]]);
+    }, null)]), [[vShow, this.visible]]);
   }
 });
 var OptionGroup = defineComponent({
@@ -14102,7 +14105,7 @@ var OptionGroup = defineComponent({
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, !this.groupCollapse]])]), [[vShow, this.visible]]);
   }
 });
-var Component$j = defineComponent({
+var Component$k = defineComponent({
   name: "Tag",
   props: {
     theme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
@@ -14164,7 +14167,7 @@ var Component$j = defineComponent({
     }, null) : ""]);
   }
 });
-const BkTag = withInstall(Component$j);
+const BkTag = withInstall(Component$k);
 function _isSlot$5(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
@@ -14253,7 +14256,7 @@ var SelectTagInput = defineComponent({
     }, null), [[vModelText, this.value]]), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
   }
 });
-var Component$i = defineComponent({
+var Component$j = defineComponent({
   name: "Select",
   directives: {
     clickoutside: ClickOutside
@@ -14283,7 +14286,11 @@ var Component$i = defineComponent({
     scrollLoading: PropTypes.bool.def(false),
     allowCreate: PropTypes.bool.def(false),
     popoverOptions: PropTypes.object.def({}),
-    customContent: PropTypes.bool.def(false)
+    customContent: PropTypes.bool.def(false),
+    list: PropTypes.array.def([]),
+    idKey: PropTypes.string.def("value"),
+    displayKey: PropTypes.string.def("label"),
+    showSelectedIcon: PropTypes.bool.def(true)
   },
   emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end", "focus", "blur"],
   setup(props2, {
@@ -14303,7 +14310,8 @@ var Component$i = defineComponent({
       showOnInit,
       multipleMode,
       allowCreate,
-      customContent
+      customContent,
+      showSelectedIcon
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
@@ -14413,8 +14421,8 @@ var Component$i = defineComponent({
       var _a;
       if (val === modelValue.value)
         return;
-      emit("change", val);
-      emit("update:modelValue", val);
+      emit("change", val, modelValue.value);
+      emit("update:modelValue", val, modelValue.value);
       (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
     };
     const handleTogglePopover = () => {
@@ -14597,6 +14605,7 @@ var Component$i = defineComponent({
       multiple,
       selected,
       activeOptionValue,
+      showSelectedIcon,
       register,
       unregister,
       registerGroup,
@@ -14714,6 +14723,7 @@ var Component$i = defineComponent({
         "modelValue": this.isInput ? this.searchKey : this.selectedLabel.join(","),
         "placeholder": this.isInput ? this.selectedLabel.join(",") || this.placeholder : this.placeholder,
         "readonly": !this.isInput,
+        "selectReadonly": true,
         "disabled": this.isDisabled,
         "behavior": this.behavior,
         "size": this.size,
@@ -14763,7 +14773,10 @@ var Component$i = defineComponent({
         "class": "bk-select-option",
         "onMouseenter": this.handleSelectedAllOptionMouseEnter,
         "onClick": this.handleToggleAll
-      }, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
+      }, [this.selectAllText]), this.list.map((item) => createVNode(BkOption, {
+        "value": item[this.idKey],
+        "label": item[this.displayKey]
+      }, null)), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), this.scrollLoading && createVNode("li", {
         "class": "bk-select-options-loading"
       }, [createVNode(BkLoading, {
         "class": "spinner mr5",
@@ -14785,7 +14798,7 @@ var Component$i = defineComponent({
     })]);
   }
 });
-const BkSelect = withInstallProps(Component$i, { Option: BkOption, Group: OptionGroup });
+const BkSelect = withInstallProps(Component$j, { Option: BkOption, Group: OptionGroup });
 function _isSlot$4(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
@@ -14795,7 +14808,7 @@ const {
 const sliderPops = Object.assign({}, propsMixin);
 sliderPops.width.default = "400";
 sliderPops.height.default = "100%";
-var Component$h = defineComponent({
+var Component$i = defineComponent({
   name: "Sideslider",
   components: {
     BkModal,
@@ -14884,7 +14897,7 @@ var Component$h = defineComponent({
     };
   }
 });
-const BkSideslider = withInstall(Component$h);
+const BkSideslider = withInstall(Component$i);
 const stepsProps = {
   theme: PropTypes.theme().def("primary"),
   size: PropTypes.size(),
@@ -14898,7 +14911,7 @@ const stepsProps = {
   steps: PropTypes.array.def([]),
   beforeChange: PropTypes.func
 };
-var Component$g = defineComponent({
+var Component$h = defineComponent({
   name: "Steps",
   props: stepsProps,
   emits: ["update:curStep", "click"],
@@ -15052,8 +15065,8 @@ var Component$g = defineComponent({
     })]);
   }
 });
-const BkSteps$2 = withInstall(Component$g);
-var Component$f = defineComponent({
+const BkSteps$2 = withInstall(Component$h);
+var Component$g = defineComponent({
   name: "Switcher",
   props: {
     theme: PropTypes.theme().def(""),
@@ -15147,7 +15160,7 @@ var Component$f = defineComponent({
     }, [isChecked.value ? props2.onText : props2.offText]) : ""]);
   }
 });
-const BkSwitcher = withInstall(Component$f);
+const BkSwitcher = withInstall(Component$g);
 const EventProps = {
   onContentScroll: Function
 };
@@ -15284,7 +15297,7 @@ var virtualRender = {
     }
   }
 };
-var Component$e = defineComponent({
+var Component$f = defineComponent({
   name: "VirtualRender",
   directives: {
     bkVirtualRender: virtualRender
@@ -15438,7 +15451,7 @@ var Component$e = defineComponent({
     };
   }
 });
-const BkVirtualRender = withInstall(Component$e);
+const BkVirtualRender = withInstall(Component$f);
 var BORDER_OPTION = /* @__PURE__ */ ((BORDER_OPTION2) => {
   BORDER_OPTION2["NONE"] = "none";
   BORDER_OPTION2["ROW"] = "row";
@@ -16059,7 +16072,7 @@ const paginationProps = {
     return value.some((item) => layoutNameMap[item]);
   }, "layout \u7684\u503C\u53EA\u652F\u6301 * total\u3001list\u3001limit *").def(["total", "list", "limit"])
 };
-var Component$d = defineComponent({
+var Component$e = defineComponent({
   name: "Pagination",
   props: paginationProps,
   emits: ["update:modelValue", "change", "update:limit", "limitChange"],
@@ -16126,7 +16139,7 @@ var Component$d = defineComponent({
     }))]);
   }
 });
-const BkPagination = withInstall(Component$d);
+const BkPagination = withInstall(Component$e);
 var TableRow = defineComponent({
   name: "TableRow",
   render() {
@@ -17510,7 +17523,7 @@ const useInit = (props2) => {
     updateColGroups
   };
 };
-var Component$c = defineComponent({
+var Component$d = defineComponent({
   name: "Table",
   props: tableProps,
   emits: EMIT_EVENT_TYPES,
@@ -17752,7 +17765,7 @@ var Component$c = defineComponent({
     ]);
   }
 });
-const BkTable = withInstall(Component$c);
+const BkTable = withInstall(Component$d);
 const INPUT_MIN_WIDTH = 12;
 function usePage(pageSize) {
   const state = reactive({
@@ -17927,7 +17940,7 @@ var TagRender = defineComponent({
     }, [this.node[this.displayKey]])]);
   }
 });
-var Component$b = defineComponent({
+var Component$c = defineComponent({
   name: "TagInput",
   directives: {
     bkTooltips: tooltips
@@ -18680,7 +18693,7 @@ var Component$b = defineComponent({
     })]);
   }
 });
-const TagInput = withInstall(Component$b);
+const TagInput = withInstall(Component$c);
 const dividerProps = {
   direction: PropTypes.commonType(["horizontal", "vertical"], "direction").def("horizontal"),
   align: PropTypes.commonType(["left", "center", "right"], "align").def("center"),
@@ -19617,7 +19630,7 @@ const menuProps = {
     default: true
   }
 };
-var Component$a = defineComponent({
+var Component$b = defineComponent({
   name: "Menu",
   props: menuProps,
   emits: ["update:activeKey", "update:openKeys", "click", "openChange"],
@@ -19865,7 +19878,7 @@ var Submenu = defineComponent({
     };
   }
 });
-const BkMenu = withInstallProps(Component$a, { Item, Submenu, Group });
+const BkMenu = withInstallProps(Component$b, { Item, Submenu, Group });
 const TitleProps = {
   sideTitle: {
     type: String,
@@ -19945,7 +19958,7 @@ const NavigationProps = {
     default: true
   }
 };
-var Component$9 = defineComponent({
+var Component$a = defineComponent({
   name: "Navigation",
   props: NavigationProps,
   emits: ["leave", "toggle", "hover", "toggle-click"],
@@ -20087,7 +20100,7 @@ var Component$9 = defineComponent({
     }, [(_l = (_k = this.$slots).footer) == null ? void 0 : _l.call(_k)])])])])]);
   }
 });
-const Navigation = withInstall(Component$9);
+const Navigation = withInstall(Component$a);
 const pickerDropdownProps = {
   placement: {
     type: String,
@@ -23442,7 +23455,7 @@ const datePickerProps = {
   },
   disableDate: Function
 };
-var Component$8 = defineComponent({
+var Component$9 = defineComponent({
   name: "DatePicker",
   directives: {
     clickoutside: ClickOutside
@@ -23971,7 +23984,7 @@ var Component$8 = defineComponent({
     })]), [[resolveDirective("clickoutside"), this.handleClose]]);
   }
 });
-const BkDatePicker = withInstall(Component$8);
+const BkDatePicker = withInstall(Component$9);
 var ArrayType = /* @__PURE__ */ ((ArrayType2) => {
   ArrayType2["OBJECT_ARRAY"] = "objectArray";
   ArrayType2["BASE_ARRAY"] = "baseArray";
@@ -24027,7 +24040,7 @@ function useSelectListSearch(selectList, displayCode) {
     selectListSearch
   };
 }
-var Component$7 = defineComponent({
+var Component$8 = defineComponent({
   name: "Transfer",
   props: transferProps,
   emits: ["change", "update:targetList"],
@@ -24198,7 +24211,7 @@ var Component$7 = defineComponent({
     }, [getHeaderHtml("right-header"), getListContentHtml("right")])]);
   }
 });
-const Transfer = withInstall(Component$7);
+const Transfer = withInstall(Component$8);
 var EVENTS = /* @__PURE__ */ ((EVENTS2) => {
   EVENTS2["NODE_CLICK"] = "nodeClick";
   EVENTS2["NODE_COLLAPSE"] = "nodeCollapse";
@@ -25296,7 +25309,7 @@ var useTreeInit = (props2) => {
     onSelected
   };
 };
-var Component$6 = defineComponent({
+var Component$7 = defineComponent({
   name: "Tree",
   props: treeProps,
   emits: TreeEmitEventsType,
@@ -25407,7 +25420,7 @@ var Component$6 = defineComponent({
     });
   }
 });
-const BkTree = withInstall(Component$6);
+const BkTree = withInstall(Component$7);
 const isCustomComponent = (node) => node.__v_isVNode;
 var ComposeFormItem = defineComponent({
   name: "ComposeFormItem",
@@ -26300,7 +26313,7 @@ class Store {
     nodeDataList.forEach((node) => this.appendNode(node, parentNode));
   }
 }
-var Component$5 = defineComponent({
+var Component$6 = defineComponent({
   name: "Cascader",
   directives: {
     clickoutside: ClickOutside
@@ -26473,7 +26486,7 @@ var Component$5 = defineComponent({
     })]);
   }
 });
-const BkCascader = withInstallProps(Component$5, { CascaderPanel });
+const BkCascader = withInstallProps(Component$6, { CascaderPanel });
 var SliderButton = defineComponent({
   name: "SliderButton",
   props: {
@@ -26644,7 +26657,7 @@ const off = (element, event, handler) => {
     element.removeEventListener(event, handler, false);
   }
 };
-var Component$4 = defineComponent({
+var Component$5 = defineComponent({
   name: "Slider",
   props: {
     modelValue: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
@@ -27090,8 +27103,8 @@ var Component$4 = defineComponent({
     return this.renderDom();
   }
 });
-const Slider = withInstall(Component$4);
-var Component$3 = defineComponent({
+const Slider = withInstall(Component$5);
+var Component$4 = defineComponent({
   name: "ResizeLayout",
   props: {
     placement: PropTypes.placement().def("left"),
@@ -27346,13 +27359,13 @@ var Component$3 = defineComponent({
     }, null)]);
   }
 });
-const BkResizeLayout = withInstall(Component$3);
+const BkResizeLayout = withInstall(Component$4);
 const timelineProps = {
   list: PropTypes.array.def([]),
   titleAble: PropTypes.bool.def(false),
   extCls: PropTypes.string
 };
-var Component$2 = defineComponent({
+var Component$3 = defineComponent({
   name: "Timeline",
   props: timelineProps,
   emits: ["select"],
@@ -27461,7 +27474,7 @@ var Component$2 = defineComponent({
     })]);
   }
 });
-const BkSteps$1 = withInstall(Component$2);
+const BkSteps$1 = withInstall(Component$3);
 const processProps = {
   list: PropTypes.array.def([]),
   controllable: PropTypes.bool.def(false),
@@ -27470,7 +27483,7 @@ const processProps = {
   displayKey: PropTypes.string.def("content"),
   extCls: PropTypes.string
 };
-var Component$1 = defineComponent({
+var Component$2 = defineComponent({
   name: "BKProcess",
   props: processProps,
   emits: ["update:curProcess", "click"],
@@ -27566,7 +27579,7 @@ var Component$1 = defineComponent({
     }, [item[this.displayKey], renderIcon(index, item)]))])]);
   }
 });
-const BkSteps = withInstall(Component$1);
+const BkSteps = withInstall(Component$2);
 const CLASS_PREFIX = "bk-upload";
 var EThemes = /* @__PURE__ */ ((EThemes2) => {
   EThemes2["BUTTON"] = "button";
@@ -28284,7 +28297,7 @@ var sparkMd5 = { exports: {} };
       ;
     if (typeof ArrayBuffer !== "undefined" && !ArrayBuffer.prototype.slice) {
       (function() {
-        function clamp(val, length) {
+        function clamp2(val, length) {
           val = val | 0 || 0;
           if (val < 0) {
             return Math.max(val + length, 0);
@@ -28292,9 +28305,9 @@ var sparkMd5 = { exports: {} };
           return Math.min(val, length);
         }
         ArrayBuffer.prototype.slice = function(from, to) {
-          var length = this.byteLength, begin = clamp(from, length), end2 = length, num, target, targetArray, sourceArray;
+          var length = this.byteLength, begin = clamp2(from, length), end2 = length, num, target, targetArray, sourceArray;
           if (to !== undefined$1) {
-            end2 = clamp(to, length);
+            end2 = clamp2(to, length);
           }
           if (begin > end2) {
             return new ArrayBuffer(0);
@@ -28833,7 +28846,7 @@ var useFileHandler = (props2, hooks) => {
     handleProgress
   };
 };
-var Component = defineComponent({
+var Component$1 = defineComponent({
   name: "BkUpload",
   props: uploadProps,
   emits: ["on-exceed", "on-progress", "on-success", "on-error", "on-delete", "on-done"],
@@ -29028,7 +29041,7 @@ var Component = defineComponent({
     })]);
   }
 });
-const Upload = withInstall(Component);
+const Upload = withInstall(Component$1);
 function Diff$1() {
 }
 Diff$1.prototype = {
@@ -31952,6 +31965,1618 @@ var CodeDiff = defineComponent({
   }
 });
 const BkCodeDiff = withInstall(CodeDiff);
+var tinycolor$1 = { exports: {} };
+(function(module) {
+  (function(Math2) {
+    var trimLeft = /^\s+/, trimRight = /\s+$/, tinyCounter = 0, mathRound = Math2.round, mathMin = Math2.min, mathMax = Math2.max, mathRandom = Math2.random;
+    function tinycolor2(color, opts) {
+      color = color ? color : "";
+      opts = opts || {};
+      if (color instanceof tinycolor2) {
+        return color;
+      }
+      if (!(this instanceof tinycolor2)) {
+        return new tinycolor2(color, opts);
+      }
+      var rgb = inputToRGB(color);
+      this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = mathRound(100 * this._a) / 100, this._format = opts.format || rgb.format;
+      this._gradientType = opts.gradientType;
+      if (this._r < 1) {
+        this._r = mathRound(this._r);
+      }
+      if (this._g < 1) {
+        this._g = mathRound(this._g);
+      }
+      if (this._b < 1) {
+        this._b = mathRound(this._b);
+      }
+      this._ok = rgb.ok;
+      this._tc_id = tinyCounter++;
+    }
+    tinycolor2.prototype = {
+      isDark: function() {
+        return this.getBrightness() < 128;
+      },
+      isLight: function() {
+        return !this.isDark();
+      },
+      isValid: function() {
+        return this._ok;
+      },
+      getOriginalInput: function() {
+        return this._originalInput;
+      },
+      getFormat: function() {
+        return this._format;
+      },
+      getAlpha: function() {
+        return this._a;
+      },
+      getBrightness: function() {
+        var rgb = this.toRgb();
+        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+      },
+      getLuminance: function() {
+        var rgb = this.toRgb();
+        var RsRGB, GsRGB, BsRGB, R2, G, B2;
+        RsRGB = rgb.r / 255;
+        GsRGB = rgb.g / 255;
+        BsRGB = rgb.b / 255;
+        if (RsRGB <= 0.03928) {
+          R2 = RsRGB / 12.92;
+        } else {
+          R2 = Math2.pow((RsRGB + 0.055) / 1.055, 2.4);
+        }
+        if (GsRGB <= 0.03928) {
+          G = GsRGB / 12.92;
+        } else {
+          G = Math2.pow((GsRGB + 0.055) / 1.055, 2.4);
+        }
+        if (BsRGB <= 0.03928) {
+          B2 = BsRGB / 12.92;
+        } else {
+          B2 = Math2.pow((BsRGB + 0.055) / 1.055, 2.4);
+        }
+        return 0.2126 * R2 + 0.7152 * G + 0.0722 * B2;
+      },
+      setAlpha: function(value) {
+        this._a = boundAlpha(value);
+        this._roundA = mathRound(100 * this._a) / 100;
+        return this;
+      },
+      toHsv: function() {
+        var hsv = rgbToHsv(this._r, this._g, this._b);
+        return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
+      },
+      toHsvString: function() {
+        var hsv = rgbToHsv(this._r, this._g, this._b);
+        var h2 = mathRound(hsv.h * 360), s2 = mathRound(hsv.s * 100), v2 = mathRound(hsv.v * 100);
+        return this._a == 1 ? "hsv(" + h2 + ", " + s2 + "%, " + v2 + "%)" : "hsva(" + h2 + ", " + s2 + "%, " + v2 + "%, " + this._roundA + ")";
+      },
+      toHsl: function() {
+        var hsl = rgbToHsl(this._r, this._g, this._b);
+        return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
+      },
+      toHslString: function() {
+        var hsl = rgbToHsl(this._r, this._g, this._b);
+        var h2 = mathRound(hsl.h * 360), s2 = mathRound(hsl.s * 100), l2 = mathRound(hsl.l * 100);
+        return this._a == 1 ? "hsl(" + h2 + ", " + s2 + "%, " + l2 + "%)" : "hsla(" + h2 + ", " + s2 + "%, " + l2 + "%, " + this._roundA + ")";
+      },
+      toHex: function(allow3Char) {
+        return rgbToHex(this._r, this._g, this._b, allow3Char);
+      },
+      toHexString: function(allow3Char) {
+        return "#" + this.toHex(allow3Char);
+      },
+      toHex8: function(allow4Char) {
+        return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+      },
+      toHex8String: function(allow4Char) {
+        return "#" + this.toHex8(allow4Char);
+      },
+      toRgb: function() {
+        return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
+      },
+      toRgbString: function() {
+        return this._a == 1 ? "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
+      },
+      toPercentageRgb: function() {
+        return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
+      },
+      toPercentageRgbString: function() {
+        return this._a == 1 ? "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+      },
+      toName: function() {
+        if (this._a === 0) {
+          return "transparent";
+        }
+        if (this._a < 1) {
+          return false;
+        }
+        return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+      },
+      toFilter: function(secondColor) {
+        var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
+        var secondHex8String = hex8String;
+        var gradientType = this._gradientType ? "GradientType = 1, " : "";
+        if (secondColor) {
+          var s2 = tinycolor2(secondColor);
+          secondHex8String = "#" + rgbaToArgbHex(s2._r, s2._g, s2._b, s2._a);
+        }
+        return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
+      },
+      toString: function(format2) {
+        var formatSet = !!format2;
+        format2 = format2 || this._format;
+        var formattedString = false;
+        var hasAlpha = this._a < 1 && this._a >= 0;
+        var needsAlphaFormat = !formatSet && hasAlpha && (format2 === "hex" || format2 === "hex6" || format2 === "hex3" || format2 === "hex4" || format2 === "hex8" || format2 === "name");
+        if (needsAlphaFormat) {
+          if (format2 === "name" && this._a === 0) {
+            return this.toName();
+          }
+          return this.toRgbString();
+        }
+        if (format2 === "rgb") {
+          formattedString = this.toRgbString();
+        }
+        if (format2 === "prgb") {
+          formattedString = this.toPercentageRgbString();
+        }
+        if (format2 === "hex" || format2 === "hex6") {
+          formattedString = this.toHexString();
+        }
+        if (format2 === "hex3") {
+          formattedString = this.toHexString(true);
+        }
+        if (format2 === "hex4") {
+          formattedString = this.toHex8String(true);
+        }
+        if (format2 === "hex8") {
+          formattedString = this.toHex8String();
+        }
+        if (format2 === "name") {
+          formattedString = this.toName();
+        }
+        if (format2 === "hsl") {
+          formattedString = this.toHslString();
+        }
+        if (format2 === "hsv") {
+          formattedString = this.toHsvString();
+        }
+        return formattedString || this.toHexString();
+      },
+      clone: function() {
+        return tinycolor2(this.toString());
+      },
+      _applyModification: function(fn2, args) {
+        var color = fn2.apply(null, [this].concat([].slice.call(args)));
+        this._r = color._r;
+        this._g = color._g;
+        this._b = color._b;
+        this.setAlpha(color._a);
+        return this;
+      },
+      lighten: function() {
+        return this._applyModification(lighten, arguments);
+      },
+      brighten: function() {
+        return this._applyModification(brighten, arguments);
+      },
+      darken: function() {
+        return this._applyModification(darken, arguments);
+      },
+      desaturate: function() {
+        return this._applyModification(desaturate, arguments);
+      },
+      saturate: function() {
+        return this._applyModification(saturate, arguments);
+      },
+      greyscale: function() {
+        return this._applyModification(greyscale, arguments);
+      },
+      spin: function() {
+        return this._applyModification(spin, arguments);
+      },
+      _applyCombination: function(fn2, args) {
+        return fn2.apply(null, [this].concat([].slice.call(args)));
+      },
+      analogous: function() {
+        return this._applyCombination(analogous, arguments);
+      },
+      complement: function() {
+        return this._applyCombination(complement, arguments);
+      },
+      monochromatic: function() {
+        return this._applyCombination(monochromatic, arguments);
+      },
+      splitcomplement: function() {
+        return this._applyCombination(splitcomplement, arguments);
+      },
+      triad: function() {
+        return this._applyCombination(triad, arguments);
+      },
+      tetrad: function() {
+        return this._applyCombination(tetrad, arguments);
+      }
+    };
+    tinycolor2.fromRatio = function(color, opts) {
+      if (typeof color == "object") {
+        var newColor = {};
+        for (var i2 in color) {
+          if (color.hasOwnProperty(i2)) {
+            if (i2 === "a") {
+              newColor[i2] = color[i2];
+            } else {
+              newColor[i2] = convertToPercentage(color[i2]);
+            }
+          }
+        }
+        color = newColor;
+      }
+      return tinycolor2(color, opts);
+    };
+    function inputToRGB(color) {
+      var rgb = { r: 0, g: 0, b: 0 };
+      var a2 = 1;
+      var s2 = null;
+      var v2 = null;
+      var l2 = null;
+      var ok = false;
+      var format2 = false;
+      if (typeof color == "string") {
+        color = stringInputToObject(color);
+      }
+      if (typeof color == "object") {
+        if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+          rgb = rgbToRgb(color.r, color.g, color.b);
+          ok = true;
+          format2 = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+        } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+          s2 = convertToPercentage(color.s);
+          v2 = convertToPercentage(color.v);
+          rgb = hsvToRgb(color.h, s2, v2);
+          ok = true;
+          format2 = "hsv";
+        } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+          s2 = convertToPercentage(color.s);
+          l2 = convertToPercentage(color.l);
+          rgb = hslToRgb(color.h, s2, l2);
+          ok = true;
+          format2 = "hsl";
+        }
+        if (color.hasOwnProperty("a")) {
+          a2 = color.a;
+        }
+      }
+      a2 = boundAlpha(a2);
+      return {
+        ok,
+        format: color.format || format2,
+        r: mathMin(255, mathMax(rgb.r, 0)),
+        g: mathMin(255, mathMax(rgb.g, 0)),
+        b: mathMin(255, mathMax(rgb.b, 0)),
+        a: a2
+      };
+    }
+    function rgbToRgb(r2, g2, b2) {
+      return {
+        r: bound01(r2, 255) * 255,
+        g: bound01(g2, 255) * 255,
+        b: bound01(b2, 255) * 255
+      };
+    }
+    function rgbToHsl(r2, g2, b2) {
+      r2 = bound01(r2, 255);
+      g2 = bound01(g2, 255);
+      b2 = bound01(b2, 255);
+      var max2 = mathMax(r2, g2, b2), min2 = mathMin(r2, g2, b2);
+      var h2, s2, l2 = (max2 + min2) / 2;
+      if (max2 == min2) {
+        h2 = s2 = 0;
+      } else {
+        var d2 = max2 - min2;
+        s2 = l2 > 0.5 ? d2 / (2 - max2 - min2) : d2 / (max2 + min2);
+        switch (max2) {
+          case r2:
+            h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+            break;
+          case g2:
+            h2 = (b2 - r2) / d2 + 2;
+            break;
+          case b2:
+            h2 = (r2 - g2) / d2 + 4;
+            break;
+        }
+        h2 /= 6;
+      }
+      return { h: h2, s: s2, l: l2 };
+    }
+    function hslToRgb(h2, s2, l2) {
+      var r2, g2, b2;
+      h2 = bound01(h2, 360);
+      s2 = bound01(s2, 100);
+      l2 = bound01(l2, 100);
+      function hue2rgb(p3, q3, t2) {
+        if (t2 < 0)
+          t2 += 1;
+        if (t2 > 1)
+          t2 -= 1;
+        if (t2 < 1 / 6)
+          return p3 + (q3 - p3) * 6 * t2;
+        if (t2 < 1 / 2)
+          return q3;
+        if (t2 < 2 / 3)
+          return p3 + (q3 - p3) * (2 / 3 - t2) * 6;
+        return p3;
+      }
+      if (s2 === 0) {
+        r2 = g2 = b2 = l2;
+      } else {
+        var q2 = l2 < 0.5 ? l2 * (1 + s2) : l2 + s2 - l2 * s2;
+        var p2 = 2 * l2 - q2;
+        r2 = hue2rgb(p2, q2, h2 + 1 / 3);
+        g2 = hue2rgb(p2, q2, h2);
+        b2 = hue2rgb(p2, q2, h2 - 1 / 3);
+      }
+      return { r: r2 * 255, g: g2 * 255, b: b2 * 255 };
+    }
+    function rgbToHsv(r2, g2, b2) {
+      r2 = bound01(r2, 255);
+      g2 = bound01(g2, 255);
+      b2 = bound01(b2, 255);
+      var max2 = mathMax(r2, g2, b2), min2 = mathMin(r2, g2, b2);
+      var h2, s2, v2 = max2;
+      var d2 = max2 - min2;
+      s2 = max2 === 0 ? 0 : d2 / max2;
+      if (max2 == min2) {
+        h2 = 0;
+      } else {
+        switch (max2) {
+          case r2:
+            h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+            break;
+          case g2:
+            h2 = (b2 - r2) / d2 + 2;
+            break;
+          case b2:
+            h2 = (r2 - g2) / d2 + 4;
+            break;
+        }
+        h2 /= 6;
+      }
+      return { h: h2, s: s2, v: v2 };
+    }
+    function hsvToRgb(h2, s2, v2) {
+      h2 = bound01(h2, 360) * 6;
+      s2 = bound01(s2, 100);
+      v2 = bound01(v2, 100);
+      var i2 = Math2.floor(h2), f2 = h2 - i2, p2 = v2 * (1 - s2), q2 = v2 * (1 - f2 * s2), t2 = v2 * (1 - (1 - f2) * s2), mod = i2 % 6, r2 = [v2, q2, p2, p2, t2, v2][mod], g2 = [t2, v2, v2, q2, p2, p2][mod], b2 = [p2, p2, t2, v2, v2, q2][mod];
+      return { r: r2 * 255, g: g2 * 255, b: b2 * 255 };
+    }
+    function rgbToHex(r2, g2, b2, allow3Char) {
+      var hex = [
+        pad2(mathRound(r2).toString(16)),
+        pad2(mathRound(g2).toString(16)),
+        pad2(mathRound(b2).toString(16))
+      ];
+      if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
+        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+      }
+      return hex.join("");
+    }
+    function rgbaToHex(r2, g2, b2, a2, allow4Char) {
+      var hex = [
+        pad2(mathRound(r2).toString(16)),
+        pad2(mathRound(g2).toString(16)),
+        pad2(mathRound(b2).toString(16)),
+        pad2(convertDecimalToHex(a2))
+      ];
+      if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
+        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+      }
+      return hex.join("");
+    }
+    function rgbaToArgbHex(r2, g2, b2, a2) {
+      var hex = [
+        pad2(convertDecimalToHex(a2)),
+        pad2(mathRound(r2).toString(16)),
+        pad2(mathRound(g2).toString(16)),
+        pad2(mathRound(b2).toString(16))
+      ];
+      return hex.join("");
+    }
+    tinycolor2.equals = function(color1, color2) {
+      if (!color1 || !color2) {
+        return false;
+      }
+      return tinycolor2(color1).toRgbString() == tinycolor2(color2).toRgbString();
+    };
+    tinycolor2.random = function() {
+      return tinycolor2.fromRatio({
+        r: mathRandom(),
+        g: mathRandom(),
+        b: mathRandom()
+      });
+    };
+    function desaturate(color, amount) {
+      amount = amount === 0 ? 0 : amount || 10;
+      var hsl = tinycolor2(color).toHsl();
+      hsl.s -= amount / 100;
+      hsl.s = clamp01(hsl.s);
+      return tinycolor2(hsl);
+    }
+    function saturate(color, amount) {
+      amount = amount === 0 ? 0 : amount || 10;
+      var hsl = tinycolor2(color).toHsl();
+      hsl.s += amount / 100;
+      hsl.s = clamp01(hsl.s);
+      return tinycolor2(hsl);
+    }
+    function greyscale(color) {
+      return tinycolor2(color).desaturate(100);
+    }
+    function lighten(color, amount) {
+      amount = amount === 0 ? 0 : amount || 10;
+      var hsl = tinycolor2(color).toHsl();
+      hsl.l += amount / 100;
+      hsl.l = clamp01(hsl.l);
+      return tinycolor2(hsl);
+    }
+    function brighten(color, amount) {
+      amount = amount === 0 ? 0 : amount || 10;
+      var rgb = tinycolor2(color).toRgb();
+      rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * -(amount / 100))));
+      rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * -(amount / 100))));
+      rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * -(amount / 100))));
+      return tinycolor2(rgb);
+    }
+    function darken(color, amount) {
+      amount = amount === 0 ? 0 : amount || 10;
+      var hsl = tinycolor2(color).toHsl();
+      hsl.l -= amount / 100;
+      hsl.l = clamp01(hsl.l);
+      return tinycolor2(hsl);
+    }
+    function spin(color, amount) {
+      var hsl = tinycolor2(color).toHsl();
+      var hue = (hsl.h + amount) % 360;
+      hsl.h = hue < 0 ? 360 + hue : hue;
+      return tinycolor2(hsl);
+    }
+    function complement(color) {
+      var hsl = tinycolor2(color).toHsl();
+      hsl.h = (hsl.h + 180) % 360;
+      return tinycolor2(hsl);
+    }
+    function triad(color) {
+      var hsl = tinycolor2(color).toHsl();
+      var h2 = hsl.h;
+      return [
+        tinycolor2(color),
+        tinycolor2({ h: (h2 + 120) % 360, s: hsl.s, l: hsl.l }),
+        tinycolor2({ h: (h2 + 240) % 360, s: hsl.s, l: hsl.l })
+      ];
+    }
+    function tetrad(color) {
+      var hsl = tinycolor2(color).toHsl();
+      var h2 = hsl.h;
+      return [
+        tinycolor2(color),
+        tinycolor2({ h: (h2 + 90) % 360, s: hsl.s, l: hsl.l }),
+        tinycolor2({ h: (h2 + 180) % 360, s: hsl.s, l: hsl.l }),
+        tinycolor2({ h: (h2 + 270) % 360, s: hsl.s, l: hsl.l })
+      ];
+    }
+    function splitcomplement(color) {
+      var hsl = tinycolor2(color).toHsl();
+      var h2 = hsl.h;
+      return [
+        tinycolor2(color),
+        tinycolor2({ h: (h2 + 72) % 360, s: hsl.s, l: hsl.l }),
+        tinycolor2({ h: (h2 + 216) % 360, s: hsl.s, l: hsl.l })
+      ];
+    }
+    function analogous(color, results, slices) {
+      results = results || 6;
+      slices = slices || 30;
+      var hsl = tinycolor2(color).toHsl();
+      var part = 360 / slices;
+      var ret = [tinycolor2(color)];
+      for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
+        hsl.h = (hsl.h + part) % 360;
+        ret.push(tinycolor2(hsl));
+      }
+      return ret;
+    }
+    function monochromatic(color, results) {
+      results = results || 6;
+      var hsv = tinycolor2(color).toHsv();
+      var h2 = hsv.h, s2 = hsv.s, v2 = hsv.v;
+      var ret = [];
+      var modification = 1 / results;
+      while (results--) {
+        ret.push(tinycolor2({ h: h2, s: s2, v: v2 }));
+        v2 = (v2 + modification) % 1;
+      }
+      return ret;
+    }
+    tinycolor2.mix = function(color1, color2, amount) {
+      amount = amount === 0 ? 0 : amount || 50;
+      var rgb1 = tinycolor2(color1).toRgb();
+      var rgb2 = tinycolor2(color2).toRgb();
+      var p2 = amount / 100;
+      var rgba = {
+        r: (rgb2.r - rgb1.r) * p2 + rgb1.r,
+        g: (rgb2.g - rgb1.g) * p2 + rgb1.g,
+        b: (rgb2.b - rgb1.b) * p2 + rgb1.b,
+        a: (rgb2.a - rgb1.a) * p2 + rgb1.a
+      };
+      return tinycolor2(rgba);
+    };
+    tinycolor2.readability = function(color1, color2) {
+      var c1 = tinycolor2(color1);
+      var c2 = tinycolor2(color2);
+      return (Math2.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math2.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
+    };
+    tinycolor2.isReadable = function(color1, color2, wcag2) {
+      var readability = tinycolor2.readability(color1, color2);
+      var wcag2Parms, out;
+      out = false;
+      wcag2Parms = validateWCAG2Parms(wcag2);
+      switch (wcag2Parms.level + wcag2Parms.size) {
+        case "AAsmall":
+        case "AAAlarge":
+          out = readability >= 4.5;
+          break;
+        case "AAlarge":
+          out = readability >= 3;
+          break;
+        case "AAAsmall":
+          out = readability >= 7;
+          break;
+      }
+      return out;
+    };
+    tinycolor2.mostReadable = function(baseColor, colorList, args) {
+      var bestColor = null;
+      var bestScore = 0;
+      var readability;
+      var includeFallbackColors, level, size;
+      args = args || {};
+      includeFallbackColors = args.includeFallbackColors;
+      level = args.level;
+      size = args.size;
+      for (var i2 = 0; i2 < colorList.length; i2++) {
+        readability = tinycolor2.readability(baseColor, colorList[i2]);
+        if (readability > bestScore) {
+          bestScore = readability;
+          bestColor = tinycolor2(colorList[i2]);
+        }
+      }
+      if (tinycolor2.isReadable(baseColor, bestColor, { "level": level, "size": size }) || !includeFallbackColors) {
+        return bestColor;
+      } else {
+        args.includeFallbackColors = false;
+        return tinycolor2.mostReadable(baseColor, ["#fff", "#000"], args);
+      }
+    };
+    var names = tinycolor2.names = {
+      aliceblue: "f0f8ff",
+      antiquewhite: "faebd7",
+      aqua: "0ff",
+      aquamarine: "7fffd4",
+      azure: "f0ffff",
+      beige: "f5f5dc",
+      bisque: "ffe4c4",
+      black: "000",
+      blanchedalmond: "ffebcd",
+      blue: "00f",
+      blueviolet: "8a2be2",
+      brown: "a52a2a",
+      burlywood: "deb887",
+      burntsienna: "ea7e5d",
+      cadetblue: "5f9ea0",
+      chartreuse: "7fff00",
+      chocolate: "d2691e",
+      coral: "ff7f50",
+      cornflowerblue: "6495ed",
+      cornsilk: "fff8dc",
+      crimson: "dc143c",
+      cyan: "0ff",
+      darkblue: "00008b",
+      darkcyan: "008b8b",
+      darkgoldenrod: "b8860b",
+      darkgray: "a9a9a9",
+      darkgreen: "006400",
+      darkgrey: "a9a9a9",
+      darkkhaki: "bdb76b",
+      darkmagenta: "8b008b",
+      darkolivegreen: "556b2f",
+      darkorange: "ff8c00",
+      darkorchid: "9932cc",
+      darkred: "8b0000",
+      darksalmon: "e9967a",
+      darkseagreen: "8fbc8f",
+      darkslateblue: "483d8b",
+      darkslategray: "2f4f4f",
+      darkslategrey: "2f4f4f",
+      darkturquoise: "00ced1",
+      darkviolet: "9400d3",
+      deeppink: "ff1493",
+      deepskyblue: "00bfff",
+      dimgray: "696969",
+      dimgrey: "696969",
+      dodgerblue: "1e90ff",
+      firebrick: "b22222",
+      floralwhite: "fffaf0",
+      forestgreen: "228b22",
+      fuchsia: "f0f",
+      gainsboro: "dcdcdc",
+      ghostwhite: "f8f8ff",
+      gold: "ffd700",
+      goldenrod: "daa520",
+      gray: "808080",
+      green: "008000",
+      greenyellow: "adff2f",
+      grey: "808080",
+      honeydew: "f0fff0",
+      hotpink: "ff69b4",
+      indianred: "cd5c5c",
+      indigo: "4b0082",
+      ivory: "fffff0",
+      khaki: "f0e68c",
+      lavender: "e6e6fa",
+      lavenderblush: "fff0f5",
+      lawngreen: "7cfc00",
+      lemonchiffon: "fffacd",
+      lightblue: "add8e6",
+      lightcoral: "f08080",
+      lightcyan: "e0ffff",
+      lightgoldenrodyellow: "fafad2",
+      lightgray: "d3d3d3",
+      lightgreen: "90ee90",
+      lightgrey: "d3d3d3",
+      lightpink: "ffb6c1",
+      lightsalmon: "ffa07a",
+      lightseagreen: "20b2aa",
+      lightskyblue: "87cefa",
+      lightslategray: "789",
+      lightslategrey: "789",
+      lightsteelblue: "b0c4de",
+      lightyellow: "ffffe0",
+      lime: "0f0",
+      limegreen: "32cd32",
+      linen: "faf0e6",
+      magenta: "f0f",
+      maroon: "800000",
+      mediumaquamarine: "66cdaa",
+      mediumblue: "0000cd",
+      mediumorchid: "ba55d3",
+      mediumpurple: "9370db",
+      mediumseagreen: "3cb371",
+      mediumslateblue: "7b68ee",
+      mediumspringgreen: "00fa9a",
+      mediumturquoise: "48d1cc",
+      mediumvioletred: "c71585",
+      midnightblue: "191970",
+      mintcream: "f5fffa",
+      mistyrose: "ffe4e1",
+      moccasin: "ffe4b5",
+      navajowhite: "ffdead",
+      navy: "000080",
+      oldlace: "fdf5e6",
+      olive: "808000",
+      olivedrab: "6b8e23",
+      orange: "ffa500",
+      orangered: "ff4500",
+      orchid: "da70d6",
+      palegoldenrod: "eee8aa",
+      palegreen: "98fb98",
+      paleturquoise: "afeeee",
+      palevioletred: "db7093",
+      papayawhip: "ffefd5",
+      peachpuff: "ffdab9",
+      peru: "cd853f",
+      pink: "ffc0cb",
+      plum: "dda0dd",
+      powderblue: "b0e0e6",
+      purple: "800080",
+      rebeccapurple: "663399",
+      red: "f00",
+      rosybrown: "bc8f8f",
+      royalblue: "4169e1",
+      saddlebrown: "8b4513",
+      salmon: "fa8072",
+      sandybrown: "f4a460",
+      seagreen: "2e8b57",
+      seashell: "fff5ee",
+      sienna: "a0522d",
+      silver: "c0c0c0",
+      skyblue: "87ceeb",
+      slateblue: "6a5acd",
+      slategray: "708090",
+      slategrey: "708090",
+      snow: "fffafa",
+      springgreen: "00ff7f",
+      steelblue: "4682b4",
+      tan: "d2b48c",
+      teal: "008080",
+      thistle: "d8bfd8",
+      tomato: "ff6347",
+      turquoise: "40e0d0",
+      violet: "ee82ee",
+      wheat: "f5deb3",
+      white: "fff",
+      whitesmoke: "f5f5f5",
+      yellow: "ff0",
+      yellowgreen: "9acd32"
+    };
+    var hexNames = tinycolor2.hexNames = flip2(names);
+    function flip2(o2) {
+      var flipped = {};
+      for (var i2 in o2) {
+        if (o2.hasOwnProperty(i2)) {
+          flipped[o2[i2]] = i2;
+        }
+      }
+      return flipped;
+    }
+    function boundAlpha(a2) {
+      a2 = parseFloat(a2);
+      if (isNaN(a2) || a2 < 0 || a2 > 1) {
+        a2 = 1;
+      }
+      return a2;
+    }
+    function bound01(n2, max2) {
+      if (isOnePointZero(n2)) {
+        n2 = "100%";
+      }
+      var processPercent = isPercentage(n2);
+      n2 = mathMin(max2, mathMax(0, parseFloat(n2)));
+      if (processPercent) {
+        n2 = parseInt(n2 * max2, 10) / 100;
+      }
+      if (Math2.abs(n2 - max2) < 1e-6) {
+        return 1;
+      }
+      return n2 % max2 / parseFloat(max2);
+    }
+    function clamp01(val) {
+      return mathMin(1, mathMax(0, val));
+    }
+    function parseIntFromHex(val) {
+      return parseInt(val, 16);
+    }
+    function isOnePointZero(n2) {
+      return typeof n2 == "string" && n2.indexOf(".") != -1 && parseFloat(n2) === 1;
+    }
+    function isPercentage(n2) {
+      return typeof n2 === "string" && n2.indexOf("%") != -1;
+    }
+    function pad2(c2) {
+      return c2.length == 1 ? "0" + c2 : "" + c2;
+    }
+    function convertToPercentage(n2) {
+      if (n2 <= 1) {
+        n2 = n2 * 100 + "%";
+      }
+      return n2;
+    }
+    function convertDecimalToHex(d2) {
+      return Math2.round(parseFloat(d2) * 255).toString(16);
+    }
+    function convertHexToDecimal(h2) {
+      return parseIntFromHex(h2) / 255;
+    }
+    var matchers = function() {
+      var CSS_INTEGER = "[-\\+]?\\d+%?";
+      var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
+      var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+      var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+      var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+      return {
+        CSS_UNIT: new RegExp(CSS_UNIT),
+        rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
+        rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+        hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+        hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+        hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+        hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+        hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+        hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+        hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+        hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+      };
+    }();
+    function isValidCSSUnit(color) {
+      return !!matchers.CSS_UNIT.exec(color);
+    }
+    function stringInputToObject(color) {
+      color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
+      var named = false;
+      if (names[color]) {
+        color = names[color];
+        named = true;
+      } else if (color == "transparent") {
+        return { r: 0, g: 0, b: 0, a: 0, format: "name" };
+      }
+      var match2;
+      if (match2 = matchers.rgb.exec(color)) {
+        return { r: match2[1], g: match2[2], b: match2[3] };
+      }
+      if (match2 = matchers.rgba.exec(color)) {
+        return { r: match2[1], g: match2[2], b: match2[3], a: match2[4] };
+      }
+      if (match2 = matchers.hsl.exec(color)) {
+        return { h: match2[1], s: match2[2], l: match2[3] };
+      }
+      if (match2 = matchers.hsla.exec(color)) {
+        return { h: match2[1], s: match2[2], l: match2[3], a: match2[4] };
+      }
+      if (match2 = matchers.hsv.exec(color)) {
+        return { h: match2[1], s: match2[2], v: match2[3] };
+      }
+      if (match2 = matchers.hsva.exec(color)) {
+        return { h: match2[1], s: match2[2], v: match2[3], a: match2[4] };
+      }
+      if (match2 = matchers.hex8.exec(color)) {
+        return {
+          r: parseIntFromHex(match2[1]),
+          g: parseIntFromHex(match2[2]),
+          b: parseIntFromHex(match2[3]),
+          a: convertHexToDecimal(match2[4]),
+          format: named ? "name" : "hex8"
+        };
+      }
+      if (match2 = matchers.hex6.exec(color)) {
+        return {
+          r: parseIntFromHex(match2[1]),
+          g: parseIntFromHex(match2[2]),
+          b: parseIntFromHex(match2[3]),
+          format: named ? "name" : "hex"
+        };
+      }
+      if (match2 = matchers.hex4.exec(color)) {
+        return {
+          r: parseIntFromHex(match2[1] + "" + match2[1]),
+          g: parseIntFromHex(match2[2] + "" + match2[2]),
+          b: parseIntFromHex(match2[3] + "" + match2[3]),
+          a: convertHexToDecimal(match2[4] + "" + match2[4]),
+          format: named ? "name" : "hex8"
+        };
+      }
+      if (match2 = matchers.hex3.exec(color)) {
+        return {
+          r: parseIntFromHex(match2[1] + "" + match2[1]),
+          g: parseIntFromHex(match2[2] + "" + match2[2]),
+          b: parseIntFromHex(match2[3] + "" + match2[3]),
+          format: named ? "name" : "hex"
+        };
+      }
+      return false;
+    }
+    function validateWCAG2Parms(parms) {
+      var level, size;
+      parms = parms || { "level": "AA", "size": "small" };
+      level = (parms.level || "AA").toUpperCase();
+      size = (parms.size || "small").toLowerCase();
+      if (level !== "AA" && level !== "AAA") {
+        level = "AA";
+      }
+      if (size !== "small" && size !== "large") {
+        size = "small";
+      }
+      return { "level": level, "size": size };
+    }
+    if (module.exports) {
+      module.exports = tinycolor2;
+    } else {
+      window.tinycolor = tinycolor2;
+    }
+  })(Math);
+})(tinycolor$1);
+var tinycolor = tinycolor$1.exports;
+const inputContainerProps = {
+  info: PropTypes.object.isRequired
+};
+var InputContainer = defineComponent({
+  props: inputContainerProps,
+  emits: ["tab", "input"],
+  setup(props2, {
+    emit
+  }) {
+    const handleTab = (e) => {
+      if (props2.info.key === "a") {
+        emit("tab", e);
+      }
+    };
+    const handleInput = (e) => {
+      const {
+        key: key2
+      } = props2.info;
+      const {
+        value
+      } = e.target;
+      emit("input", key2, value);
+    };
+    const colorPickerCls = computed(() => classes({
+      error: props2.info.error
+    }, "bk-color-picker-input-value"));
+    return () => createVNode("div", {
+      "class": "bk-color-picker-input-part"
+    }, [createVNode("input", {
+      "type": props2.info.name === "HEX" ? "text" : "number",
+      "class": colorPickerCls.value,
+      "value": props2.info.value,
+      "onKeydown": handleTab,
+      "onInput": handleInput
+    }, null), createVNode("span", {
+      "class": "bk-color-picker-input-text"
+    }, [props2.info.name])]);
+  }
+});
+const colorPickerProps$4 = {
+  colorObj: PropTypes.object.isRequired
+};
+var ColorInput = defineComponent({
+  name: "ColorPicker",
+  props: colorPickerProps$4,
+  emits: ["change", "tab"],
+  setup(props2, {
+    emit
+  }) {
+    const hex = reactive({
+      key: "hex",
+      name: "HEX",
+      value: props2.colorObj.hex,
+      error: false
+    });
+    const r2 = reactive({
+      key: "r",
+      name: "R",
+      value: props2.colorObj.rgba.r.toString(),
+      error: false
+    });
+    const g2 = reactive({
+      key: "g",
+      name: "G",
+      value: props2.colorObj.rgba.g.toString(),
+      error: false
+    });
+    const b2 = reactive({
+      key: "b",
+      name: "B",
+      value: props2.colorObj.rgba.b.toString(),
+      error: false
+    });
+    const a2 = reactive({
+      key: "a",
+      name: "Alpha",
+      value: props2.colorObj.rgba.a.toString(),
+      error: false
+    });
+    watch(() => props2.colorObj, (val) => {
+      if (tinycolor(val.hex).toString() !== tinycolor(hex.value).toString()) {
+        hex.value = val.hex;
+      }
+      r2.value = val.rgba.r.toString();
+      g2.value = val.rgba.g.toString();
+      b2.value = val.rgba.b.toString();
+      a2.value = val.rgba.a.toString();
+      validate();
+    }, {
+      deep: true
+    });
+    const handleAlphaTab = (e) => {
+      emit("tab", e);
+    };
+    const handleInput = (key2, value) => {
+      const colorList = {
+        r: r2,
+        g: g2,
+        b: b2,
+        a: a2,
+        hex
+      };
+      colorList[key2].value = value;
+      if (validate()) {
+        const colorStr = key2 === "hex" ? hex.value : `rgba(${r2.value}, ${g2.value}, ${b2.value}, ${a2.value})`;
+        emit("change", colorStr);
+      }
+    };
+    const validate = () => {
+      let result = true;
+      if (hex.value.startsWith("#") && (hex.value.length === 4 || hex.value.length === 7) && !hex.value.slice(1).match(/[^0-9a-fA-F]/)) {
+        hex.error = false;
+      } else {
+        hex.error = true;
+        result = false;
+      }
+      if (a2.value !== "" && a2.value >= 0 && a2.value <= 1) {
+        a2.error = false;
+      } else {
+        a2.error = true;
+        result = false;
+      }
+      for (const colorInfo of [r2, g2, b2]) {
+        const {
+          value
+        } = colorInfo;
+        if (value !== "" && value >= 0 && value <= 255) {
+          colorInfo.error = false;
+        } else {
+          colorInfo.error = true;
+          result = false;
+        }
+      }
+      return result;
+    };
+    return () => createVNode("div", {
+      "class": "bk-color-picker-input"
+    }, [createVNode("div", {
+      "class": "bk-color-picker-input-hex"
+    }, [createVNode(InputContainer, {
+      "info": hex,
+      "onInput": handleInput
+    }, null)]), createVNode("div", {
+      "class": "bk-color-picker-input-rgba"
+    }, [createVNode(InputContainer, {
+      "info": r2,
+      "onInput": handleInput
+    }, null), createVNode(InputContainer, {
+      "info": g2,
+      "onInput": handleInput
+    }, null), createVNode(InputContainer, {
+      "info": b2,
+      "onInput": handleInput
+    }, null), createVNode(InputContainer, {
+      "info": a2,
+      "onInput": handleInput,
+      "onTab": handleAlphaTab
+    }, null)])]);
+  }
+});
+const formatColor = (colorParam) => {
+  let colorValue = colorParam;
+  if (colorParam === "") {
+    colorValue = "#FFFFFF";
+  }
+  const tinyColor = tinycolor(colorParam);
+  const hsl = tinyColor.toHsl();
+  const hsv = tinyColor.toHsv();
+  if (hsl.s === 0) {
+    hsl.h = colorValue.h || 0;
+    hsv.h = colorValue.h || 0;
+  }
+  if (hsv.v < 0.0164) {
+    hsv.h = colorValue.h || 0;
+    hsv.s = colorValue.s || 0;
+  }
+  if (hsl.l < 0.01) {
+    hsl.h = colorValue.h || 0;
+    hsl.s = colorValue.s || 0;
+  }
+  return {
+    hsl,
+    hsv,
+    hex: tinyColor.toHexString().toUpperCase(),
+    rgba: tinyColor.toRgb()
+  };
+};
+const clamp = (value, min2, max2) => {
+  if (value < min2) {
+    return min2;
+  }
+  if (value > max2) {
+    return max2;
+  }
+  return value;
+};
+const getTouches = (e, prop) => e.touches ? e.touches[0][prop] : 0;
+const toRGBAString = (rgba) => {
+  const { r: r2, g: g2, b: b2, a: a2 } = rgba;
+  return `rgba(${[r2, g2, b2, a2].join(",")})`;
+};
+const colorPickerProps$3 = {
+  colorObj: PropTypes.object.isRequired
+};
+var HueSlider = defineComponent({
+  name: "ColorPicker",
+  props: colorPickerProps$3,
+  emits: ["change"],
+  setup(props2, {
+    emit
+  }) {
+    const containerRef = ref(null);
+    const pointerStyle = computed(() => ({
+      left: `${props2.colorObj.hsv.h / 360 * 100}%`
+    }));
+    const handleArrowKeydown = (e) => {
+      const {
+        clientWidth
+      } = containerRef.value;
+      let left2 = props2.colorObj.hsv.h / 360 * clientWidth;
+      const step = 2;
+      const hugeStep = 10;
+      switch (e.code) {
+        case "ArrowLeft":
+          e.preventDefault();
+          left2 = clamp(left2 - step, 0, clientWidth);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          left2 = clamp(left2 + step, 0, clientWidth);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          left2 = clamp(left2 - hugeStep, 0, clientWidth);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          left2 = clamp(left2 + hugeStep, 0, clientWidth);
+          break;
+        default:
+          return;
+      }
+      handlePointChange(null, left2);
+    };
+    const handleMouseDown = (e) => {
+      containerRef.value.focus();
+      handlePointChange(e);
+      window.addEventListener("mousemove", handlePointChange, {
+        passive: true
+      });
+      window.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handlePointChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    const handlePointChange = (e, appointedLeft) => {
+      const {
+        clientWidth
+      } = containerRef.value;
+      const left2 = appointedLeft !== void 0 ? appointedLeft : getLeft(e);
+      changeColor(left2 / clientWidth);
+    };
+    const getLeft = (e) => {
+      const xOffset = containerRef.value.getBoundingClientRect().left + window.pageXOffset;
+      const pageX = e.pageX || getTouches(e, "PageX");
+      return clamp(pageX - xOffset, 0, containerRef.value.clientWidth);
+    };
+    const changeColor = (ratio) => {
+      const {
+        h: h2,
+        s: s2,
+        l: l2,
+        a: a2
+      } = props2.colorObj.hsl;
+      const newHue = ratio * 360;
+      if (h2 !== newHue) {
+        emit("change", {
+          h: newHue,
+          s: s2,
+          l: l2,
+          a: a2
+        });
+      }
+    };
+    return () => createVNode("div", {
+      "ref": containerRef,
+      "tabindex": "0",
+      "class": "bk-color-picker-hue",
+      "onKeydown": handleArrowKeydown,
+      "onMousedown": (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        handleMouseDown(e);
+      }
+    }, [createVNode("div", {
+      "class": "bk-color-picker-hue-pointer",
+      "style": pointerStyle.value
+    }, [createVNode("div", {
+      "class": "bk-color-picker-hue-rectangle"
+    }, null)])]);
+  }
+});
+const colorPickerProps$2 = {
+  colorObj: PropTypes.object.isRequired,
+  recommend: PropTypes.oneOfType([PropTypes.array.def(() => []), PropTypes.bool.def(true)]).isRequired
+};
+var RecommendColors = defineComponent({
+  props: colorPickerProps$2,
+  emits: ["change", "tab"],
+  setup(props2, {
+    emit
+  }) {
+    const isFocused = ref(false);
+    const selectedIndex = ref(-1);
+    const selectedColor = ref(null);
+    watch(() => props2.colorObj, () => {
+      selectedIndex.value = -1;
+      selectedColor.value = null;
+    }, {
+      deep: true
+    });
+    const colors = computed(() => getColorsFromRecommend(props2.recommend));
+    const getColorClass = (color, index) => classes({
+      "bk-color-picker-empty": color === "",
+      "bk-color-picker-recommend-selected-color": isFocused.value && selectedIndex.value === index
+    }, "bk-color-picker-recommend-color");
+    const handleKeydown = (e) => {
+      if (e.code === "Tab") {
+        emit("tab", e);
+      } else {
+        let index = 0;
+        const rowNum = 10;
+        const max2 = colors.value.length - 1;
+        switch (e.code) {
+          case "ArrowLeft":
+            e.preventDefault();
+            index = clamp(selectedIndex.value - 1, 0, max2);
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            index = clamp(selectedIndex.value + 1, 0, max2);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            index = clamp(selectedIndex.value - rowNum, 0, max2);
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            index = clamp(selectedIndex.value + rowNum, 0, max2);
+            break;
+          default:
+            return;
+        }
+        selectColor(index);
+      }
+    };
+    const selectColor = (index) => {
+      const color = colors.value[index];
+      emit("change", color);
+      nextTick(() => {
+        selectedIndex.value = index;
+        selectedColor.value = color;
+      });
+    };
+    const getColorsFromRecommend = (recommend) => {
+      if (recommend === true) {
+        return ["", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#ddffff", "#00ced1", "#3a84ff", "#a933f5", "#db7093", "#000000", "#494949", "#9B9B9B", "#ffffff"];
+      }
+      if (Array.isArray(recommend)) {
+        return recommend.map((color) => tinycolor(color).isValid() ? color : "");
+      }
+    };
+    return () => createVNode("div", {
+      "tabindex": "0",
+      "class": "bk-color-picker-recommend",
+      "onFocus": () => isFocused.value = true,
+      "onBlur": () => isFocused.value = false,
+      "onKeydown": handleKeydown
+    }, [colors.value.map((color, index) => createVNode("div", {
+      "style": `background: ${color || "#fff"}`,
+      "class": getColorClass(color, index),
+      "onClick": () => selectColor(index)
+    }, [selectedIndex.value === index ? createVNode("div", {
+      "class": "bk-color-picker-pointer"
+    }, [createVNode("div", {
+      "class": "bk-color-picker-circle"
+    }, null)]) : void 0]))]);
+  }
+});
+const colorPickerProps$1 = {
+  colorObj: PropTypes.object.isRequired
+};
+var SaturationPanel = defineComponent({
+  props: colorPickerProps$1,
+  emits: ["change"],
+  setup(props2, {
+    emit
+  }) {
+    const containerRef = ref(null);
+    const backgroundStyle = computed(() => ({
+      background: `hsl(${props2.colorObj.hsv.h}, 100%, 50%)`
+    }));
+    const pointerStyle = computed(() => ({
+      top: `${(1 - props2.colorObj.hsv.v) * 100}%`,
+      left: `${props2.colorObj.hsv.s * 100}%`
+    }));
+    const handleMouseDown = (e) => {
+      containerRef.value.focus();
+      handlePointChange(e);
+      window.addEventListener("mousemove", handlePointChange, {
+        passive: true
+      });
+      window.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handlePointChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    const handleArrowKeydown = (e) => {
+      const {
+        clientWidth,
+        clientHeight
+      } = containerRef.value;
+      let left2 = props2.colorObj.hsv.s * clientWidth;
+      let top2 = (1 - props2.colorObj.hsv.v) * clientHeight;
+      const step = 10;
+      switch (e.code) {
+        case "ArrowLeft":
+          e.preventDefault();
+          left2 = clamp(left2 - step, 0, clientWidth);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          left2 = clamp(left2 + step, 0, clientWidth);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          top2 = clamp(top2 - step, 0, clientHeight);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          top2 = clamp(top2 + step, 0, clientHeight);
+          break;
+        default:
+          return;
+      }
+      handlePointChange(null, left2, top2);
+    };
+    const handlePointChange = (e, appointedLeft, appointedTop) => {
+      const {
+        clientWidth,
+        clientHeight
+      } = containerRef.value;
+      const left2 = appointedLeft !== void 0 ? appointedLeft : getLeft(e);
+      const top2 = appointedTop !== void 0 ? appointedTop : getTop(e);
+      const saturation = left2 / clientWidth;
+      const bright = 1 - top2 / clientHeight;
+      changeColor(props2.colorObj.hsv.h, saturation, bright, props2.colorObj.hsv.a);
+    };
+    const getLeft = (e) => {
+      const xOffset = containerRef.value.getBoundingClientRect().left + window.pageXOffset;
+      const pageX = e.pageX || getTouches(e, "PageX");
+      return clamp(pageX - xOffset, 0, containerRef.value.clientWidth);
+    };
+    const getTop = (e) => {
+      const yOffset = containerRef.value.getBoundingClientRect().top + window.pageYOffset;
+      const pageY = e.pageY || getTouches(e, "PageY");
+      return clamp(pageY - yOffset, 0, containerRef.value.clientHeight);
+    };
+    const changeColor = (h2, s2, v2, a2) => {
+      emit("change", {
+        h: h2,
+        s: s2,
+        v: v2,
+        a: a2
+      });
+    };
+    return () => createVNode("div", {
+      "ref": containerRef,
+      "tabindex": "0",
+      "class": "bk-color-picker-saturation",
+      "style": backgroundStyle.value,
+      "onKeydown": handleArrowKeydown,
+      "onMousedown": (e) => {
+        e.stopPropagation();
+        handleMouseDown(e);
+      }
+    }, [createVNode("div", {
+      "class": "bk-color-picker-saturation-white"
+    }, null), createVNode("div", {
+      "class": "bk-color-picker-saturation-black"
+    }, null), createVNode("div", {
+      "class": "bk-color-picker-pointer",
+      "style": pointerStyle.value
+    }, [createVNode("div", {
+      "class": "bk-color-picker-circle"
+    }, null)])]);
+  }
+});
+const colorPickerProps = {
+  modelValue: PropTypes.string.def(""),
+  disabled: PropTypes.bool.def(false),
+  readonly: PropTypes.bool.def(false),
+  transfer: PropTypes.bool.def(false),
+  size: PropTypes.size(["", "small", "large"]).def(""),
+  showValue: PropTypes.bool.def(true),
+  recommend: PropTypes.oneOfType([PropTypes.array.def(() => []), PropTypes.bool.def(true)]).def(true),
+  extCls: PropTypes.string.def("")
+};
+const whiteColorObj = formatColor("#FFFFFF");
+var Component = defineComponent({
+  name: "ColorPicker",
+  directives: {
+    clickoutside: ClickOutside
+  },
+  props: colorPickerProps,
+  emits: ["update:modelValue", "change"],
+  setup(props2, {
+    emit
+  }) {
+    const showDropdown = ref(false);
+    const colorStr = ref("");
+    const colorObj = reactive(JSON.parse(JSON.stringify(whiteColorObj)));
+    const dropRef = ref(null);
+    const saturationPanelRef = ref(null);
+    const referenceRef = ref(null);
+    const colorPickerCls = computed(() => classes({
+      [`bk-color-picker-${props2.size}`]: props2.size,
+      "bk-color-picker-show-dropdown": showDropdown.value,
+      "bk-color-picker-show-value": props2.showValue,
+      "bk-color-picker-disabled": props2.disabled || props2.readonly
+    }, `bk-color-picker ${props2.extCls}`));
+    const isRenderRecommend = computed(() => Boolean(props2.recommend === true || Array.isArray(props2.recommend) && props2.recommend.length));
+    onBeforeMount(() => {
+      changeColorFromProps({
+        isCreated: true
+      });
+    });
+    watch(() => props2.modelValue, () => {
+      changeColorFromProps();
+    });
+    const handleTriggerKeydown = (e) => {
+      if (e.code === "Enter" || e.code === "NumpadEnter") {
+        toggleDropdown();
+      } else if (e.code === "Escape") {
+        closeDropdown();
+      }
+    };
+    const handleDropdownKeydown = (e) => {
+      if (props2.transfer) {
+        handleTriggerKeydown(e);
+      }
+    };
+    const toggleDropdown = () => {
+      if (props2.disabled || props2.readonly) {
+        return;
+      }
+      showDropdown.value ? closeDropdown() : openDropdown();
+    };
+    const handleTabInput = (e) => {
+      if (!isRenderRecommend.value) {
+        e.preventDefault();
+        saturationPanelRef.value.$el.focus();
+      }
+    };
+    const handleTabRecommend = (e) => {
+      e.preventDefault();
+      saturationPanelRef.value.$el.focus();
+    };
+    const openDropdown = () => {
+      var _a;
+      showDropdown.value = true;
+      (_a = dropRef.value) == null ? void 0 : _a.updateDropdown();
+      setTimeout(() => {
+        const hexInput = dropRef.value.$el.querySelector(".bk-color-picker-input-hex .bk-color-picker-input-value");
+        hexInput.select();
+      }, 100);
+    };
+    const closeDropdown = () => {
+      var _a;
+      if (showDropdown.value) {
+        nextTick(() => referenceRef.value.focus());
+        showDropdown.value = false;
+        (_a = dropRef.value) == null ? void 0 : _a.destoryDropdown();
+        changeColorFromProps();
+      }
+    };
+    const changeColorFromProps = ({
+      isCreated = false
+    } = {}) => {
+      if (props2.modelValue === "") {
+        if (colorStr.value !== "") {
+          colorStr.value = "";
+          Object.assign(colorObj, whiteColorObj);
+          emit("update:modelValue", colorStr.value);
+        }
+        return;
+      }
+      const propsColorObj = formatColor(props2.modelValue);
+      const propsColorStr = propsColorObj.rgba.a === 1 ? propsColorObj.hex : toRGBAString(propsColorObj.rgba);
+      if (propsColorStr !== colorStr.value) {
+        const isValid2 = tinycolor(props2.modelValue).isValid();
+        if (isCreated) {
+          if (!isValid2) {
+            Object.assign(colorObj, whiteColorObj);
+            emit("change", "");
+          } else {
+            colorStr.value = propsColorStr.toLowerCase() === props2.modelValue.toLowerCase() ? props2.modelValue : propsColorStr;
+            Object.assign(colorObj, propsColorObj);
+          }
+        } else {
+          if (!isValid2) {
+            colorStr.value = "";
+            Object.assign(colorObj, whiteColorObj);
+          } else if (propsColorStr.toLowerCase() !== colorStr.value.toLowerCase()) {
+            Object.assign(colorObj, propsColorObj);
+            colorStr.value = propsColorStr;
+          }
+        }
+      }
+    };
+    const handleColorChange = (val) => {
+      if (val === "") {
+        colorStr.value = "";
+        Object.assign(colorObj, whiteColorObj);
+        emit("update:modelValue", "");
+        emit("change", "");
+        return;
+      }
+      const handleColorObj = formatColor(val);
+      const handleColorStr = handleColorObj.rgba.a === 1 ? handleColorObj.hex : toRGBAString(handleColorObj.rgba);
+      colorStr.value = handleColorStr;
+      Object.assign(colorObj, handleColorObj);
+      emit("change", handleColorStr);
+      emit("update:modelValue", colorStr.value);
+    };
+    const hideDropDown = () => {
+      showDropdown.value = false;
+    };
+    return () => withDirectives(createVNode("div", {
+      "ref": referenceRef,
+      "tabindex": "0",
+      "class": colorPickerCls.value,
+      "onKeydown": handleTriggerKeydown,
+      "onClick": toggleDropdown
+    }, [createVNode("div", {
+      "class": "bk-color-picker-color"
+    }, [createVNode("span", {
+      "class": `bk-color-picker-color-square ${!colorStr.value && "bk-color-picker-empty"}`,
+      "style": `background: ${colorStr.value || "#FFF"}`
+    }, null)]), props2.showValue ? createVNode("div", {
+      "class": "bk-color-picker-text"
+    }, [createVNode("span", null, [colorStr.value])]) : void 0, createVNode("div", {
+      "class": "bk-color-picker-icon"
+    }, [createVNode(angleUp, {
+      "class": "icon-angle-down"
+    }, null)]), createVNode(Transition, {
+      "name": "bk-fade-down-transition"
+    }, {
+      default: () => [withDirectives(createVNode(PickerDropdown, {
+        "ref": dropRef,
+        "triggerRef": referenceRef.value
+      }, {
+        default: () => [createVNode("div", {
+          "class": "bk-color-dropdown-container"
+        }, [createVNode("div", {
+          "class": "bk-color-picker-dropdown",
+          "onClick": (e) => {
+            e.stopPropagation();
+          },
+          "onMousedown": (e) => {
+            e.stopPropagation();
+          },
+          "onKeydown": handleDropdownKeydown
+        }, [createVNode(SaturationPanel, {
+          "ref": saturationPanelRef,
+          "colorObj": colorObj,
+          "onChange": handleColorChange
+        }, null), createVNode(HueSlider, {
+          "colorObj": colorObj,
+          "onChange": handleColorChange
+        }, null), createVNode(ColorInput, {
+          "colorObj": colorObj,
+          "onTab": handleTabInput,
+          "onChange": handleColorChange
+        }, null), isRenderRecommend.value ? createVNode("div", {
+          "class": "bk-color-picker-recommend-container"
+        }, [createVNode(RecommendColors, {
+          "colorObj": colorObj,
+          "recommend": props2.recommend,
+          "onTab": handleTabRecommend,
+          "onChange": handleColorChange
+        }, null)]) : void 0])])]
+      }), [[vShow, showDropdown.value]])]
+    })]), [[resolveDirective("clickoutside"), hideDropDown]]);
+  }
+});
+const BkColorPicker = withInstall(Component);
 var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Alert: BkAlert,
@@ -32006,7 +33631,8 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   TimeLine: BkSteps$1,
   Process: BkSteps,
   Upload,
-  CodeDiff: BkCodeDiff
+  CodeDiff: BkCodeDiff,
+  ColorPicker: BkColorPicker
 }, Symbol.toStringTag, { value: "Module" }));
 const createInstall = (prefix = "Bk") => (app) => {
   const pre = app.config.globalProperties.bkUIPrefix || prefix;
@@ -32024,4 +33650,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkSteps as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps$2 as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTag as Tag, TagInput, BkSteps$1 as TimeLine, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };
+export { BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCodeDiff as CodeDiff, BkCollapse as Collapse, BkColorPicker as ColorPicker, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, InfoBox, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkPopover2 as Popover2, BkSteps as Process, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkResizeLayout as ResizeLayout, BkSelect as Select, BkSideslider as Sideslider, Slider, BkSteps$2 as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTag as Tag, TagInput, BkSteps$1 as TimeLine, Transfer, BkTree as Tree, Upload, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };