@mozaic-ds/vue 0.35.1-beta.1 → 0.36.0

package/dist/mozaic-vue.common.js

@@ -9989,9 +9989,8 @@ module.exports = /MSIE|Trident/.test(UA);
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var userAgent = __webpack_require__(8113);
-var global = __webpack_require__(7854);
 
-module.exports = /ipad|iphone|ipod/i.test(userAgent) && global.Pebble !== undefined;
+module.exports = /ipad|iphone|ipod/i.test(userAgent) && typeof Pebble != 'undefined';
 
 
 /***/ }),
@@ -10010,9 +10009,8 @@ module.exports = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent);
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var classof = __webpack_require__(4326);
-var global = __webpack_require__(7854);
 
-module.exports = classof(global.process) == 'process';
+module.exports = typeof process != 'undefined' && classof(process) == 'process';
 
 
 /***/ }),
@@ -10028,11 +10026,9 @@ module.exports = /web0s(?!.*chrome)/i.test(userAgent);
 /***/ }),
 
 /***/ 8113:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var getBuiltIn = __webpack_require__(5005);
+/***/ (function(module) {
 
-module.exports = getBuiltIn('navigator', 'userAgent') || '';
+module.exports = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
 
 /***/ }),
@@ -10119,6 +10115,26 @@ module.exports = function (stack, dropEntries) {
 };
 
 
+/***/ }),
+
+/***/ 5392:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var createNonEnumerableProperty = __webpack_require__(8880);
+var clearErrorStack = __webpack_require__(1060);
+var ERROR_STACK_INSTALLABLE = __webpack_require__(2914);
+
+// non-standard V8
+var captureStackTrace = Error.captureStackTrace;
+
+module.exports = function (error, C, stack, dropEntries) {
+  if (ERROR_STACK_INSTALLABLE) {
+    if (captureStackTrace) captureStackTrace(error, C);
+    else createNonEnumerableProperty(error, 'stack', clearErrorStack(stack, dropEntries));
+  }
+};
+
+
 /***/ }),
 
 /***/ 2914:
@@ -10591,15 +10607,13 @@ module.exports = {};
 /***/ }),
 
 /***/ 842:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var global = __webpack_require__(7854);
+/***/ (function(module) {
 
 module.exports = function (a, b) {
-  var console = global.console;
-  if (console && console.error) {
+  try {
+    // eslint-disable-next-line no-console -- safe
     arguments.length == 1 ? console.error(a) : console.error(a, b);
-  }
+  } catch (error) { /* empty */ }
 };
 
 
@@ -11327,6 +11341,7 @@ module.exports = function (obj) {
 /***/ 6339:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
+var uncurryThis = __webpack_require__(1702);
 var fails = __webpack_require__(7293);
 var isCallable = __webpack_require__(614);
 var hasOwn = __webpack_require__(2597);
@@ -11337,8 +11352,12 @@ var InternalStateModule = __webpack_require__(9909);
 
 var enforceInternalState = InternalStateModule.enforce;
 var getInternalState = InternalStateModule.get;
+var $String = String;
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty = Object.defineProperty;
+var stringSlice = uncurryThis(''.slice);
+var replace = uncurryThis(''.replace);
+var join = uncurryThis([].join);
 
 var CONFIGURABLE_LENGTH = DESCRIPTORS && !fails(function () {
   return defineProperty(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
@@ -11347,8 +11366,8 @@ var CONFIGURABLE_LENGTH = DESCRIPTORS && !fails(function () {
 var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
-  if (String(name).slice(0, 7) === 'Symbol(') {
-    name = '[' + String(name).replace(/^Symbol\(([^)]*)\)/, '$1') + ']';
+  if (stringSlice($String(name), 0, 7) === 'Symbol(') {
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -11367,7 +11386,7 @@ var makeBuiltIn = module.exports = function (value, name, options) {
   } catch (error) { /* empty */ }
   var state = enforceInternalState(value);
   if (!hasOwn(state, 'source')) {
-    state.source = TEMPLATE.join(typeof name == 'string' ? name : '');
+    state.source = join(TEMPLATE, typeof name == 'string' ? name : '');
   } return value;
 };
 
@@ -11404,6 +11423,7 @@ var global = __webpack_require__(7854);
 var bind = __webpack_require__(9974);
 var getOwnPropertyDescriptor = (__webpack_require__(1236).f);
 var macrotask = (__webpack_require__(261).set);
+var Queue = __webpack_require__(8572);
 var IS_IOS = __webpack_require__(6833);
 var IS_IOS_PEBBLE = __webpack_require__(1528);
 var IS_WEBOS_WEBKIT = __webpack_require__(1036);
@@ -11415,26 +11435,22 @@ var process = global.process;
 var Promise = global.Promise;
 // Node.js 11 shows ExperimentalWarning on getting `queueMicrotask`
 var queueMicrotaskDescriptor = getOwnPropertyDescriptor(global, 'queueMicrotask');
-var queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;
-
-var flush, head, last, notify, toggle, node, promise, then;
+var microtask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;
+var notify, toggle, node, promise, then;
 
 // modern engines have queueMicrotask method
-if (!queueMicrotask) {
-  flush = function () {
+if (!microtask) {
+  var queue = new Queue();
+
+  var flush = function () {
     var parent, fn;
     if (IS_NODE && (parent = process.domain)) parent.exit();
-    while (head) {
-      fn = head.fn;
-      head = head.next;
-      try {
-        fn();
-      } catch (error) {
-        if (head) notify();
-        else last = undefined;
-        throw error;
-      }
-    } last = undefined;
+    while (fn = queue.get()) try {
+      fn();
+    } catch (error) {
+      if (queue.head) notify();
+      throw error;
+    }
     if (parent) parent.enter();
   };
 
@@ -11469,22 +11485,20 @@ if (!queueMicrotask) {
   // - onreadystatechange
   // - setTimeout
   } else {
-    // strange IE + webpack dev server bug - use .bind(global)
+    // `webpack` dev server bug on IE global methods - use bind(fn, global)
     macrotask = bind(macrotask, global);
     notify = function () {
       macrotask(flush);
     };
   }
+
+  microtask = function (fn) {
+    if (!queue.head) notify();
+    queue.add(fn);
+  };
 }
 
-module.exports = queueMicrotask || function (fn) {
-  var task = { fn: fn, next: undefined };
-  if (last) last.next = task;
-  if (!head) {
-    head = task;
-    notify();
-  } last = task;
-};
+module.exports = microtask;
 
 
 /***/ }),
@@ -12281,15 +12295,16 @@ var Queue = function () {
 Queue.prototype = {
   add: function (item) {
     var entry = { item: item, next: null };
-    if (this.head) this.tail.next = entry;
+    var tail = this.tail;
+    if (tail) tail.next = entry;
     else this.head = entry;
     this.tail = entry;
   },
   get: function () {
     var entry = this.head;
     if (entry) {
-      this.head = entry.next;
-      if (this.tail === entry) this.tail = null;
+      var next = this.head = entry.next;
+      if (next === null) this.tail = null;
       return entry.item;
     }
   }
@@ -12670,10 +12685,10 @@ var store = __webpack_require__(5465);
 (module.exports = function (key, value) {
   return store[key] || (store[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.27.1',
+  version: '3.27.2',
   mode: IS_PURE ? 'pure' : 'global',
-  copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.27.1/LICENSE',
+  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.27.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -12907,10 +12922,10 @@ var queue = {};
 var ONREADYSTATECHANGE = 'onreadystatechange';
 var $location, defer, channel, port;
 
-try {
+fails(function () {
   // Deno throws a ReferenceError on `location` access without `--location` flag
   $location = global.location;
-} catch (error) { /* empty */ }
+});
 
 var run = function (id) {
   if (hasOwn(queue, id)) {
@@ -12926,11 +12941,11 @@ var runner = function (id) {
   };
 };
 
-var listener = function (event) {
+var eventListener = function (event) {
   run(event.data);
 };
 
-var post = function (id) {
+var globalPostMessageDefer = function (id) {
   // old engines have not location.origin
   global.postMessage(String(id), $location.protocol + '//' + $location.host);
 };
@@ -12965,7 +12980,7 @@ if (!set || !clear) {
   } else if (MessageChannel && !IS_IOS) {
     channel = new MessageChannel();
     port = channel.port2;
-    channel.port1.onmessage = listener;
+    channel.port1.onmessage = eventListener;
     defer = bind(port.postMessage, port);
   // Browsers with postMessage, skip WebWorkers
   // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
@@ -12974,10 +12989,10 @@ if (!set || !clear) {
     isCallable(global.postMessage) &&
     !global.importScripts &&
     $location && $location.protocol !== 'file:' &&
-    !fails(post)
+    !fails(globalPostMessageDefer)
   ) {
-    defer = post;
-    global.addEventListener('message', listener, false);
+    defer = globalPostMessageDefer;
+    global.addEventListener('message', eventListener, false);
   // IE8-
   } else if (ONREADYSTATECHANGE in createElement('script')) {
     defer = function (id) {
@@ -13301,21 +13316,15 @@ var uid = __webpack_require__(9711);
 var NATIVE_SYMBOL = __webpack_require__(6293);
 var USE_SYMBOL_AS_UID = __webpack_require__(3307);
 
-var WellKnownSymbolsStore = shared('wks');
 var Symbol = global.Symbol;
-var symbolFor = Symbol && Symbol['for'];
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol : Symbol && Symbol.withoutSetter || uid;
+var WellKnownSymbolsStore = shared('wks');
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol['for'] || Symbol : Symbol && Symbol.withoutSetter || uid;
 
 module.exports = function (name) {
-  if (!hasOwn(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) {
-    var description = 'Symbol.' + name;
-    if (NATIVE_SYMBOL && hasOwn(Symbol, name)) {
-      WellKnownSymbolsStore[name] = Symbol[name];
-    } else if (USE_SYMBOL_AS_UID && symbolFor) {
-      WellKnownSymbolsStore[name] = symbolFor(description);
-    } else {
-      WellKnownSymbolsStore[name] = createWellKnownSymbol(description);
-    }
+  if (!hasOwn(WellKnownSymbolsStore, name)) {
+    WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn(Symbol, name)
+      ? Symbol[name]
+      : createWellKnownSymbol('Symbol.' + name);
   } return WellKnownSymbolsStore[name];
 };
 
@@ -13347,8 +13356,7 @@ var proxyAccessor = __webpack_require__(2626);
 var inheritIfRequired = __webpack_require__(9587);
 var normalizeStringArgument = __webpack_require__(6277);
 var installErrorCause = __webpack_require__(8340);
-var clearErrorStack = __webpack_require__(1060);
-var ERROR_STACK_INSTALLABLE = __webpack_require__(2914);
+var installErrorStack = __webpack_require__(5392);
 var DESCRIPTORS = __webpack_require__(9781);
 var IS_PURE = __webpack_require__(1913);
 
@@ -13374,7 +13382,7 @@ module.exports = function (FULL_NAME, wrapper, FORCED, IS_AGGREGATE_ERROR) {
     var message = normalizeStringArgument(IS_AGGREGATE_ERROR ? b : a, undefined);
     var result = IS_AGGREGATE_ERROR ? new OriginalError(a) : new OriginalError();
     if (message !== undefined) createNonEnumerableProperty(result, 'message', message);
-    if (ERROR_STACK_INSTALLABLE) createNonEnumerableProperty(result, 'stack', clearErrorStack(result.stack, 2));
+    installErrorStack(result, WrappedError, result.stack, 2);
     if (this && isPrototypeOf(OriginalErrorPrototype, this)) inheritIfRequired(result, this, WrappedError);
     if (arguments.length > OPTIONS_POSITION) installErrorCause(result, arguments[OPTIONS_POSITION]);
     return result;
@@ -13435,15 +13443,13 @@ var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails(function () {
   return array.concat()[0] !== array;
 });
 
-var SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('concat');
-
 var isConcatSpreadable = function (O) {
   if (!isObject(O)) return false;
   var spreadable = O[IS_CONCAT_SPREADABLE];
   return spreadable !== undefined ? !!spreadable : isArray(O);
 };
 
-var FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !SPECIES_SUPPORT;
+var FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !arrayMethodHasSpeciesSupport('concat');
 
 // `Array.prototype.concat` method
 // https://tc39.es/ecma262/#sec-array.prototype.concat
@@ -13619,11 +13625,11 @@ var arrayMethodIsStrict = __webpack_require__(9341);
 var nativeIndexOf = uncurryThis([].indexOf);
 
 var NEGATIVE_ZERO = !!nativeIndexOf && 1 / nativeIndexOf([1], 1, -0) < 0;
-var STRICT_METHOD = arrayMethodIsStrict('indexOf');
+var FORCED = NEGATIVE_ZERO || !arrayMethodIsStrict('indexOf');
 
 // `Array.prototype.indexOf` method
 // https://tc39.es/ecma262/#sec-array.prototype.indexof
-$({ target: 'Array', proto: true, forced: NEGATIVE_ZERO || !STRICT_METHOD }, {
+$({ target: 'Array', proto: true, forced: FORCED }, {
   indexOf: function indexOf(searchElement /* , fromIndex = 0 */) {
     var fromIndex = arguments.length > 1 ? arguments[1] : undefined;
     return NEGATIVE_ZERO
@@ -13720,11 +13726,11 @@ var arrayMethodIsStrict = __webpack_require__(9341);
 var nativeJoin = uncurryThis([].join);
 
 var ES3_STRINGS = IndexedObject != Object;
-var STRICT_METHOD = arrayMethodIsStrict('join', ',');
+var FORCED = ES3_STRINGS || !arrayMethodIsStrict('join', ',');
 
 // `Array.prototype.join` method
 // https://tc39.es/ecma262/#sec-array.prototype.join
-$({ target: 'Array', proto: true, forced: ES3_STRINGS || !STRICT_METHOD }, {
+$({ target: 'Array', proto: true, forced: FORCED }, {
   join: function join(separator) {
     return nativeJoin(toIndexedObject(this), separator === undefined ? ',' : separator);
   }
@@ -13790,18 +13796,20 @@ var INCORRECT_TO_LENGTH = fails(function () {
 
 // V8 and Safari <= 15.4, FF < 23 throws InternalError
 // https://bugs.chromium.org/p/v8/issues/detail?id=12681
-var SILENT_ON_NON_WRITABLE_LENGTH = !function () {
+var properErrorOnNonWritableLength = function () {
   try {
     // eslint-disable-next-line es/no-object-defineproperty -- safe
     Object.defineProperty([], 'length', { writable: false }).push();
   } catch (error) {
     return error instanceof TypeError;
   }
-}();
+};
+
+var FORCED = INCORRECT_TO_LENGTH || !properErrorOnNonWritableLength();
 
 // `Array.prototype.push` method
 // https://tc39.es/ecma262/#sec-array.prototype.push
-$({ target: 'Array', proto: true, arity: 1, forced: INCORRECT_TO_LENGTH || SILENT_ON_NON_WRITABLE_LENGTH }, {
+$({ target: 'Array', proto: true, arity: 1, forced: FORCED }, {
   // eslint-disable-next-line no-unused-vars -- required for `.length`
   push: function push(item) {
     var O = toObject(this);
@@ -13831,14 +13839,14 @@ var arrayMethodIsStrict = __webpack_require__(9341);
 var CHROME_VERSION = __webpack_require__(7392);
 var IS_NODE = __webpack_require__(5268);
 
-var STRICT_METHOD = arrayMethodIsStrict('reduceRight');
 // Chrome 80-82 has a critical bug
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
 var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
+var FORCED = CHROME_BUG || !arrayMethodIsStrict('reduceRight');
 
 // `Array.prototype.reduceRight` method
 // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-$({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
+$({ target: 'Array', proto: true, forced: FORCED }, {
   reduceRight: function reduceRight(callbackfn /* , initialValue */) {
     return $reduceRight(this, callbackfn, arguments.length, arguments.length > 1 ? arguments[1] : undefined);
   }
@@ -13858,14 +13866,14 @@ var arrayMethodIsStrict = __webpack_require__(9341);
 var CHROME_VERSION = __webpack_require__(7392);
 var IS_NODE = __webpack_require__(5268);
 
-var STRICT_METHOD = arrayMethodIsStrict('reduce');
 // Chrome 80-82 has a critical bug
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
 var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
+var FORCED = CHROME_BUG || !arrayMethodIsStrict('reduce');
 
 // `Array.prototype.reduce` method
 // https://tc39.es/ecma262/#sec-array.prototype.reduce
-$({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
+$({ target: 'Array', proto: true, forced: FORCED }, {
   reduce: function reduce(callbackfn /* , initialValue */) {
     var length = arguments.length;
     return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
@@ -14169,6 +14177,7 @@ var exportWebAssemblyErrorCauseWrapper = function (ERROR_NAME, wrapper) {
   }
 };
 
+// https://tc39.es/ecma262/#sec-nativeerror
 // https://github.com/tc39/proposal-error-cause
 exportGlobalErrorCauseWrapper('Error', function (init) {
   return function Error(message) { return apply(init, this, arguments); };
@@ -14511,8 +14520,7 @@ var toIndexedObject = __webpack_require__(5656);
 var nativeGetOwnPropertyDescriptor = (__webpack_require__(1236).f);
 var DESCRIPTORS = __webpack_require__(9781);
 
-var FAILS_ON_PRIMITIVES = fails(function () { nativeGetOwnPropertyDescriptor(1); });
-var FORCED = !DESCRIPTORS || FAILS_ON_PRIMITIVES;
+var FORCED = !DESCRIPTORS || fails(function () { nativeGetOwnPropertyDescriptor(1); });
 
 // `Object.getOwnPropertyDescriptor` method
 // https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
@@ -16224,6 +16232,7 @@ __webpack_require__.d(__webpack_exports__, {
   "MHeading": function() { return /* reexport */ MHeading; },
   "MHero": function() { return /* reexport */ MHero; },
   "MIcon": function() { return /* reexport */ MIcon; },
+  "MKpi": function() { return /* reexport */ MKpi; },
   "MLayer": function() { return /* reexport */ MLayer; },
   "MLink": function() { return /* reexport */ MLink; },
   "MListBox": function() { return /* reexport */ MListBox; },
@@ -21272,28 +21281,28 @@ MField.install = function (Vue) {
   Vue.component(MField.name, MField);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=70af3a89&
-var MDropdownvue_type_template_id_70af3a89_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=24b48417&
+var MDropdownvue_type_template_id_24b48417_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     directives: [{
       name: "click-outside",
       rawName: "v-click-outside",
-      value: _vm.onClickOutside,
-      expression: "onClickOutside"
+      value: _vm.closeListBox,
+      expression: "closeListBox"
     }],
     ref: "dropdown",
     staticClass: "mc-dropdown",
-    class: {
-      'mc-dropdown--multi': _vm.multiple
-    },
+    class: _vm.classObject,
     style: _vm.setStyles
+  }, [_c('div', {
+    staticClass: "mc-dropdown__main"
   }, [_vm.multiple && _vm.listboxValue.length > 0 ? _c('MTag', {
     ref: "tag",
     staticClass: "mc-dropdown__tag",
     attrs: {
-      "id": _vm.tagId ? _vm.tagId : "autoCompleteTag-".concat(_vm.uuid),
+      "id": _vm.tagId ? _vm.tagId : "dropdownTag-".concat(_vm.uuid),
       "label": _vm.setTagLabel,
       "disabled": _vm.disabled,
       "type": "removable",
@@ -21301,15 +21310,12 @@ var MDropdownvue_type_template_id_70af3a89_render = function render() {
     },
     on: {
       "remove-tag": function removeTag($event) {
-        return _vm.clearAutocomplete();
+        return _vm.clearListbox();
       }
     }
   }) : _vm._e(), _c('button', {
     staticClass: "mc-select mc-dropdown__trigger",
-    class: {
-      'is-open': _vm.openState,
-      'mc-select--s': _vm.size === 's'
-    },
+    class: _vm.classObjectTrigger,
     attrs: {
       "type": "button",
       "disabled": _vm.disabled
@@ -21319,7 +21325,22 @@ var MDropdownvue_type_template_id_70af3a89_render = function render() {
         _vm.openState = !_vm.openState;
       }
     }
-  }, [_vm._v(" " + _vm._s(_vm.buttonValue) + " ")]), _c('MListBox', {
+  }, [_vm._v(" " + _vm._s(_vm.buttonValue) + " ")]), _vm.isClearable ? _c('button', {
+    staticClass: "mc-dropdown__clear",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.clearListbox
+    }
+  }, [_c('MIcon', {
+    staticClass: "mc-dropdown__clear-icon",
+    attrs: {
+      "name": "ControlTagCross24"
+    }
+  }), _c('span', {
+    staticClass: "mc-dropdown__clear-text"
+  }, [_vm._v(_vm._s(_vm.labelClearButton))])], 1) : _vm._e()], 1), _c('MListBox', {
     attrs: {
       "open": _vm.openState,
       "items": _vm.localItems,
@@ -21331,7 +21352,7 @@ var MDropdownvue_type_template_id_70af3a89_render = function render() {
       "max-width": _vm.maxWidth
     },
     on: {
-      "change": _vm.onChange
+      "change": _vm.onChangeListbox
     },
     scopedSlots: _vm._u([{
       key: "item",
@@ -21351,7 +21372,7 @@ var MDropdownvue_type_template_id_70af3a89_render = function render() {
     }
   })], 1);
 };
-var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
+var MDropdownvue_type_template_id_24b48417_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
 
@@ -21365,9 +21386,11 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
 
 
 
+
 /* harmony default export */ var MDropdownvue_type_script_lang_js_ = ({
   name: 'MDropdown',
   components: {
+    MIcon: MIcon,
     MTag: MTag,
     MListBox: MListBox
   },
@@ -21404,10 +21427,6 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
       type: String,
       default: '-- Placeholder --'
     },
-    filter: {
-      type: Function,
-      default: null
-    },
     size: {
       type: String,
       default: 'm',
@@ -21456,6 +21475,15 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
       type: Boolean,
       default: true
     },
+    // Clear Button
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    labelClearButton: {
+      type: String,
+      default: 'Clear'
+    },
     // Global
     maxWidth: {
       type: String,
@@ -21475,17 +21503,41 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
     };
   },
   computed: {
-    setTagLabel: function setTagLabel() {
-      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    classObject: function classObject() {
+      return {
+        'mc-dropdown--multi': this.multiple,
+        'mc-dropdown--clearable': this.isClearable
+      };
     },
     setStyles: function setStyles() {
       return {
         '--dropdown-width': this.maxWidth,
         '--dropdown-tag-width': this.tagWidth
       };
+    },
+    setTagLabel: function setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    getListboxValue: function getListboxValue() {
+      return this.multiple ? this.listboxValue.length : this.listboxValue !== undefined;
+    },
+    isClearable: function isClearable() {
+      return this.clearable && this.getListboxValue && !this.disabled;
+    },
+    classObjectTrigger: function classObjectTrigger() {
+      return {
+        'is-open': this.openState,
+        'mc-select--s': this.size === 's'
+      };
     }
   },
   watch: {
+    items: {
+      handler: function handler(val) {
+        this.localItems = val;
+      },
+      immediate: true
+    },
     value: {
       handler: function handler(val) {
         if (!val && this.multiple) {
@@ -21496,21 +21548,13 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
       },
       immediate: true
     },
-    items: {
-      handler: function handler(val) {
-        this.localItems = val;
-        // this.clearAutocomplete();
-      },
-
-      immediate: true
-    },
     listboxValue: function listboxValue(val) {
       var _this = this;
       var selectedItems = this.getSelectedItems(val);
       var seletedLabels = selectedItems.map(function (item) {
         return item[_this.dataTextExpr];
       });
-      this.buttonValue = val.length === 0 ? this.placeholder : seletedLabels.join(', ');
+      this.buttonValue = (!val || val.length === 0) && this.placeholder || seletedLabels.join(', ');
       if (this.multiple) {
         this.tagValue = val;
       }
@@ -21535,12 +21579,12 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
         }
       });
     },
-    clearAutocomplete: function clearAutocomplete() {
+    clearListbox: function clearListbox() {
       this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
+      this.onChangeListbox();
       this.$emit('clear');
     },
-    onClickOutside: function onClickOutside() {
+    closeListBox: function closeListBox() {
       this.openState = false;
       if (this.multiple && this.sort) {
         this.sortItems();
@@ -21548,10 +21592,10 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
         this.localItems = this.items;
       }
     },
-    onChange: function onChange() {
+    onChangeListbox: function onChangeListbox() {
       this.$emit('change', this.listboxValue);
       if (!this.multiple) {
-        this.onClickOutside();
+        this.closeListBox();
       }
     },
     getSelectedItems: function getSelectedItems(val) {
@@ -21577,15 +21621,16 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
           return -1;
         }
       });
+      this.localItems = this.sortedListItems;
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
  /* harmony default export */ var dropdown_MDropdownvue_type_script_lang_js_ = (MDropdownvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=70af3a89&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=24b48417&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=70af3a89&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=24b48417&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue
 
@@ -21598,8 +21643,8 @@ var MDropdownvue_type_template_id_70af3a89_staticRenderFns = [];
 
 var MDropdown_component = normalizeComponent(
   dropdown_MDropdownvue_type_script_lang_js_,
-  MDropdownvue_type_template_id_70af3a89_render,
-  MDropdownvue_type_template_id_70af3a89_staticRenderFns,
+  MDropdownvue_type_template_id_24b48417_render,
+  MDropdownvue_type_template_id_24b48417_staticRenderFns,
   false,
   null,
   null,
@@ -31924,6 +31969,170 @@ MTooltip.install = function (Vue) {
 
 
 
+
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/kpi/MKpi.vue?vue&type=template&id=f779b646&
+var MKpivue_type_template_id_f779b646_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "mc-kpi"
+  }, [_vm.size === 's' ? _c('div', {
+    staticClass: "mc-kpi-small"
+  }, [_c('div', {
+    staticClass: "mc-kpi-small__value",
+    class: 'mc-kpi-small__value-' + [_vm.classForTheme]
+  }, [_vm._v(" " + _vm._s(_vm.value) + " ")]), _vm.showIcon && _vm.icon ? _c('div', {
+    staticClass: "mc-kpi-small__icon"
+  }, [_c('m-icon', {
+    attrs: {
+      "name": _vm.icon
+    }
+  })], 1) : _vm._e()]) : _vm.size === 'm' ? _c('div', {
+    staticClass: "mc-kpi-medium"
+  }, [_c('div', {
+    staticClass: "mc-kpi-medium__data"
+  }, [_c('div', {
+    staticClass: "mc-kpi-medium__label"
+  }, [_vm._v(" " + _vm._s(_vm.label) + " ")])]), _c('div', {
+    staticClass: "mc-kpi-medium__container",
+    class: 'mc-kpi-medium__container-' + _vm.classForTheme
+  }, [_c('div', {
+    staticClass: "mc-kpi-medium__value",
+    class: ['mc-kpi-medium__value-' + _vm.classForTheme, _vm.classExpectedValueWithoutIcon]
+  }, [_vm._v(" " + _vm._s(_vm.value) + " ")]), _vm.showIcon && _vm.icon ? _c('div', {
+    staticClass: "mc-kpi-medium__icon"
+  }, [_c('div', [_c('m-icon', {
+    attrs: {
+      "name": _vm.icon
+    }
+  })], 1)]) : _vm._e()])]) : _c('div', {
+    staticClass: "mc-kpi-large",
+    class: 'mc-kpi-large-' + _vm.classForTheme
+  }, [_c('div', {
+    staticClass: "mc-kpi-large__data",
+    class: [_vm.classDetailsBarActive, 'mc-kpi-large__data-' + _vm.classForTheme]
+  }, [_c('div', {
+    staticClass: "mc-kpi-large__container"
+  }, [_c('div', {
+    staticClass: "mc-kpi-large__label",
+    class: 'mc-kpi-large__label-' + _vm.classForTheme
+  }, [_vm._v(" " + _vm._s(_vm.label) + " ")]), _c('div', {
+    staticClass: "mc-kpi-large__value",
+    class: 'mc-kpi-large__value-' + _vm.classForTheme
+  }, [_vm._v(" " + _vm._s(_vm.value) + " ")])])]), _vm.showDetailsBar ? _c('div', {
+    staticClass: "mc-kpi-large__details"
+  }, [_vm.showExpectedValue ? _c('div', {
+    staticClass: "mc-kpi-large__expected",
+    class: _vm.classExpectedValueWithoutIcon
+  }, [_vm._v(" " + _vm._s(_vm.expected) + " ")]) : _vm._e(), _vm.showIcon && _vm.icon ? _c('div', {
+    staticClass: "mc-kpi-large__icon",
+    class: _vm.classIconWithoutExpectedValue
+  }, [_c('m-icon', {
+    attrs: {
+      "name": _vm.icon
+    }
+  })], 1) : _vm._e()]) : _vm._e()])]);
+};
+var MKpivue_type_template_id_f779b646_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/kpi/MKpi.vue?vue&type=script&lang=js&
+
+
+/* harmony default export */ var MKpivue_type_script_lang_js_ = ({
+  name: 'MKpi',
+  components: {
+    MIcon: MIcon
+  },
+  props: {
+    label: {
+      type: String,
+      default: 'Label'
+    },
+    value: {
+      type: String,
+      default: '99.99%'
+    },
+    theme: {
+      type: String,
+      default: 'info'
+    },
+    expected: {
+      type: String,
+      default: '> 10% expected'
+    },
+    size: {
+      type: String,
+      default: 'l',
+      validator: function validator(value) {
+        return responsiveModifierValidators(value, ['s', 'm', 'l']);
+      }
+    },
+    icon: {
+      type: String,
+      default: 'ArrowArrowTopRight16'
+    },
+    showDetailsBar: {
+      type: Boolean,
+      default: true
+    },
+    showExpectedValue: {
+      type: Boolean,
+      default: true
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    classDetailsBarActive: function classDetailsBarActive() {
+      return !this.showDetailsBar ? 'mc-kpi__without-details-bar' : '';
+    },
+    classExpectedValueWithoutIcon: function classExpectedValueWithoutIcon() {
+      return !this.showIcon ? 'mc-kpi__without-icon' : '';
+    },
+    classIconWithoutExpectedValue: function classIconWithoutExpectedValue() {
+      return !this.showExpectedValue ? 'mc-kpi__without-expected-value' : '';
+    },
+    classForTheme: function classForTheme() {
+      return this.theme;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/kpi/MKpi.vue?vue&type=script&lang=js&
+ /* harmony default export */ var kpi_MKpivue_type_script_lang_js_ = (MKpivue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/kpi/MKpi.vue?vue&type=style&index=0&id=f779b646&prod&lang=scss&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/kpi/MKpi.vue?vue&type=style&index=0&id=f779b646&prod&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/kpi/MKpi.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var MKpi_component = normalizeComponent(
+  kpi_MKpivue_type_script_lang_js_,
+  MKpivue_type_template_id_f779b646_render,
+  MKpivue_type_template_id_f779b646_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MKpi = (MKpi_component.exports);
+;// CONCATENATED MODULE: ./src/components/kpi/index.js
+
+
+MKpi.install = function (Vue) {
+  Vue.component(MKpi.name, MKpi);
+};
 
 ;// CONCATENATED MODULE: ./src/index.js
 
@@ -31988,6 +32197,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js