maz-ui 3.19.3 → 3.20.0

package/components/chunks/MazCheckbox-12a37b71.mjs

@@ -0,0 +1,144 @@
+import "../assets/MazCheckbox.css";
+import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
+import { u as useInstanceUniqId, _ as _export_sfc } from "./MazPhoneNumberInput-94d7c29b.mjs";
+import CheckIcon from "./check-77afbaee.mjs";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "checked", "disabled", "name"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCheckbox",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    id: { type: String, default: void 0 },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    name: { type: String, default: "m-checkbox" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: [
+    /* emitted when value change */
+    "update:model-value",
+    /* emited when value change */
+    "change"
+  ],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "848d9fe6": checkIconColor.value,
+      "fb0e9a22": checkboxSize.value,
+      "cf55634c": checkboxSelectedColor.value,
+      "99c81ec6": checkboxBoxShadow.value
+    }));
+    const instance = getCurrentInstance();
+    const props = __props;
+    const emits = __emit;
+    const instanceId = useInstanceUniqId({
+      componentName: "MazCheckbox",
+      instance,
+      providedId: props.id
+    });
+    const checkboxSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "2.25rem";
+        }
+        case "lg": {
+          return "2rem";
+        }
+        default: {
+          return "1.625rem";
+        }
+        case "sm": {
+          return "1.425rem";
+        }
+        case "xs": {
+          return "1.325rem";
+        }
+        case "mini": {
+          return "1.2rem";
+        }
+      }
+    });
+    const checkIconSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "maz-text-2xl";
+        }
+        case "lg": {
+          return "maz-text-xl";
+        }
+        default: {
+          return "maz-text-lg";
+        }
+        case "sm": {
+          return "maz-text-base";
+        }
+        case "xs": {
+          return "maz-text-sm";
+        }
+        case "mini": {
+          return "maz-text-xs";
+        }
+      }
+    });
+    const checkIconColor = computed(() => `var(--maz-color-${props.color}-contrast)`);
+    const checkboxSelectedColor = computed(() => `var(--maz-color-${props.color})`);
+    const checkboxBoxShadow = computed(
+      () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
+    );
+    function keyboardHandler(event) {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        emitValue(!props.modelValue);
+      }
+    }
+    function emitValue(value) {
+      emits("update:model-value", value);
+      emits("change", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        for: unref(instanceId),
+        class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
+        tabindex: "1",
+        onKeydown: keyboardHandler
+      }, [
+        createElementVNode("input", mergeProps({
+          id: unref(instanceId),
+          checked: __props.modelValue
+        }, _ctx.$attrs, {
+          disabled: __props.disabled,
+          name: __props.name,
+          type: "checkbox",
+          onChange: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+          })
+        }), null, 16, _hoisted_2),
+        createElementVNode("span", null, [
+          createVNode(Transition, {
+            name: "maz-scale",
+            persisted: ""
+          }, {
+            default: withCtx(() => [
+              withDirectives(createVNode(unref(CheckIcon), {
+                class: normalizeClass(["check-icon", checkIconSize.value])
+              }, null, 8, ["class"]), [
+                [vShow, __props.modelValue]
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const MazCheckbox_vue_vue_type_style_index_0_scoped_5b54604c_lang = "";
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b54604c"]]);
+export {
+  MazCheckbox as default
+};

package/components/chunks/MazCheckbox-aeada499.mjs

@@ -0,0 +1,144 @@
+import "../assets/MazCheckbox.css";
+import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
+import { u as useInstanceUniqId, _ as _export_sfc } from "./MazSelect-5c3b7a30.mjs";
+import CheckIcon from "./check-77afbaee.mjs";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "checked", "disabled", "name"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCheckbox",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    id: { type: String, default: void 0 },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    name: { type: String, default: "m-checkbox" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: [
+    /* emitted when value change */
+    "update:model-value",
+    /* emited when value change */
+    "change"
+  ],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "848d9fe6": checkIconColor.value,
+      "fb0e9a22": checkboxSize.value,
+      "cf55634c": checkboxSelectedColor.value,
+      "99c81ec6": checkboxBoxShadow.value
+    }));
+    const instance = getCurrentInstance();
+    const props = __props;
+    const emits = __emit;
+    const instanceId = useInstanceUniqId({
+      componentName: "MazCheckbox",
+      instance,
+      providedId: props.id
+    });
+    const checkboxSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "2.25rem";
+        }
+        case "lg": {
+          return "2rem";
+        }
+        default: {
+          return "1.625rem";
+        }
+        case "sm": {
+          return "1.425rem";
+        }
+        case "xs": {
+          return "1.325rem";
+        }
+        case "mini": {
+          return "1.2rem";
+        }
+      }
+    });
+    const checkIconSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "maz-text-2xl";
+        }
+        case "lg": {
+          return "maz-text-xl";
+        }
+        default: {
+          return "maz-text-lg";
+        }
+        case "sm": {
+          return "maz-text-base";
+        }
+        case "xs": {
+          return "maz-text-sm";
+        }
+        case "mini": {
+          return "maz-text-xs";
+        }
+      }
+    });
+    const checkIconColor = computed(() => `var(--maz-color-${props.color}-contrast)`);
+    const checkboxSelectedColor = computed(() => `var(--maz-color-${props.color})`);
+    const checkboxBoxShadow = computed(
+      () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
+    );
+    function keyboardHandler(event) {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        emitValue(!props.modelValue);
+      }
+    }
+    function emitValue(value) {
+      emits("update:model-value", value);
+      emits("change", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        for: unref(instanceId),
+        class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
+        tabindex: "1",
+        onKeydown: keyboardHandler
+      }, [
+        createElementVNode("input", mergeProps({
+          id: unref(instanceId),
+          checked: __props.modelValue
+        }, _ctx.$attrs, {
+          disabled: __props.disabled,
+          name: __props.name,
+          type: "checkbox",
+          onChange: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+          })
+        }), null, 16, _hoisted_2),
+        createElementVNode("span", null, [
+          createVNode(Transition, {
+            name: "maz-scale",
+            persisted: ""
+          }, {
+            default: withCtx(() => [
+              withDirectives(createVNode(unref(CheckIcon), {
+                class: normalizeClass(["check-icon", checkIconSize.value])
+              }, null, 8, ["class"]), [
+                [vShow, __props.modelValue]
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const MazCheckbox_vue_vue_type_style_index_0_scoped_5b54604c_lang = "";
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b54604c"]]);
+export {
+  MazCheckbox as default
+};

package/components/chunks/{MazPhoneNumberInput-e4f90230.mjs → MazPhoneNumberInput-94d7c29b.mjs}

@@ -1,5 +1,5 @@
 import "../assets/MazPhoneNumberInput.css";
-import { computed, defineAsyncComponent, defineComponent, ref, getCurrentInstance, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, onBeforeMount, watch, nextTick, unref, Transition, normalizeStyle, Fragment, renderList, reactive } from "vue";
+import { computed, defineAsyncComponent, defineComponent, ref, getCurrentInstance, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, useCssVars, onBeforeMount, watch, unref, Transition, normalizeStyle, Fragment, renderList, nextTick, reactive } from "vue";
 import { isSupportedCountry, getCountryCallingCode, getExampleNumber, getCountries, parsePhoneNumberFromString, AsYouType } from "libphonenumber-js";
 function truthyFilter(value) {
   return !!value;
@@ -192,11 +192,11 @@ function debounce(func, delay) {
     }, delay);
   };
 }
-const MazBtn = defineAsyncComponent(() => import("./MazBtn-b29e3116.mjs"));
+const MazBtn = defineAsyncComponent(() => import("./MazBtn-e578aab0.mjs"));
 const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
 const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-3c6844fc.mjs"));
 const EyeIcon = defineAsyncComponent(() => import("./eye-290c6a03.mjs"));
-const CheckIcon = defineAsyncComponent(() => import("./check-b1507ce9.mjs"));
+const CheckIcon = defineAsyncComponent(() => import("./check-77afbaee.mjs"));
 const _sfc_main$2 = defineComponent({
   components: {
     MazBtn,
@@ -553,7 +553,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "MazSelect",
   props: {
     modelValue: {
-      type: [Number, String, Boolean],
+      type: [Number, String, Boolean, Array],
       default: void 0
     },
     id: { type: String, default: void 0 },
@@ -588,7 +588,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     },
     search: { type: Boolean, default: false },
-    searchPlaceholder: { type: String, default: "Search in options" }
+    searchPlaceholder: { type: String, default: "Search in options" },
+    multiple: { type: Boolean, default: false }
   },
   emits: [
     "close",
@@ -601,6 +602,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     "selected-option"
   ],
   setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "4268d79e": keyboardSelectedBgColor.value,
+      "71723ca0": selectedTextColor.value,
+      "66e06018": selectedBgColor.value
+    }));
+    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-12a37b71.mjs"));
     const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-6a0dd1a2.mjs"));
     const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-7a070b10.mjs"));
     const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-6173a20b.mjs"));
@@ -609,42 +616,64 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     const listOpened = ref(false);
     const tmpModelValueIndex = ref();
+    const isBlackOrTransparentColor = computed(
+      () => ["black", "transparent", "white"].includes(props.color)
+    );
+    const selectedTextColor = computed(
+      () => isBlackOrTransparentColor.value ? `var(--maz-color-black)` : `var(--maz-color-${props.color}-800)`
+    );
+    const selectedBgColor = computed(
+      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-100)`
+    );
+    const keyboardSelectedBgColor = computed(
+      () => isBlackOrTransparentColor.value ? "var(--maz-color-muted)" : `var(--maz-color-${props.color}-200)`
+    );
     const hasListOpened = computed(() => listOpened.value || props.open);
     const instanceId = useInstanceUniqId({
       componentName: "MazSelect",
       instance,
       providedId: props.id
     });
+    const selectedOptions = computed(
+      () => {
+        var _a;
+        return ((_a = props.options) == null ? void 0 : _a.filter((option) => {
+          return props.multiple ? Array.isArray(props.modelValue) ? props.modelValue.includes(option[props.optionValueKey]) && !isNullOrUndefined(option[props.optionValueKey]) : false : props.modelValue === option[props.optionValueKey] && !isNullOrUndefined(option[props.optionValueKey]);
+        })) ?? [];
+      }
+    );
     onBeforeMount(() => {
-      var _a, _b;
+      var _a;
       if (!((_a = props.options) == null ? void 0 : _a.length)) {
         console.warn("[maz-ui](MazSelect) you must provide options");
       }
-      if (selectedOption.value) {
-        tmpModelValueIndex.value = (_b = props.options) == null ? void 0 : _b.findIndex(
-          (option) => {
-            var _a2;
-            return option[props.optionValueKey] === ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]);
-          }
-        );
-      }
+      updateTmpModelValueIndex();
     });
     const mazSelectElement = ref();
     const mazInputComponent = ref();
     const searchInputComponent = ref();
     const optionsListElement = ref();
-    const selectedOption = computed(
-      () => {
-        var _a;
-        return (_a = props.options) == null ? void 0 : _a.find((option) => props.modelValue === option[props.optionValueKey]);
-      }
-    );
     const isNullOrUndefined = (value) => {
       return value === void 0 || value === null;
     };
+    function isSelectedOption(option) {
+      var _a;
+      const hasOption = ((_a = selectedOptions.value) == null ? void 0 : _a.some(
+        (selectedOption) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
+      )) ?? false;
+      return hasOption && !isNullOrUndefined(option[props.optionValueKey]);
+    }
     const mazInputValue = computed(() => {
-      var _a, _b, _c;
-      return isNullOrUndefined((_a = selectedOption.value) == null ? void 0 : _a[props.optionValueKey]) ? void 0 : ((_b = selectedOption.value) == null ? void 0 : _b[props.optionInputValueKey]) ?? ((_c = selectedOption.value) == null ? void 0 : _c[props.optionLabelKey]);
+      var _a, _b;
+      if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {
+        return props.modelValue.map(
+          (value) => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = optionsList.value) == null ? void 0 : _a2.find((option) => option[props.optionValueKey] === value)) == null ? void 0 : _b2[props.optionInputValueKey];
+          }
+        ).join(", ");
+      }
+      return (_b = (_a = optionsList.value) == null ? void 0 : _a.find((option) => option[props.optionValueKey] === props.modelValue)) == null ? void 0 : _b[props.optionInputValueKey];
     });
     const listTransition = computed(
       () => props.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
@@ -662,10 +691,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     watch(
       () => props.modelValue,
       (value, oldValue) => {
-        if (value && value !== oldValue) {
-          scrollToSelected();
-          updateTmpModelValueIndex();
-        }
       }
     );
     function getFilteredOptionWithQuery(query2) {
@@ -689,17 +714,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emits("close", event);
     };
     const openList = async (event) => {
-      event == null ? void 0 : event.preventDefault();
-      if (props.disabled)
+      if (props.disabled || hasListOpened.value)
         return;
+      event == null ? void 0 : event.preventDefault();
       listOpened.value = true;
-      await scrollToSelected();
+      await scrollToOptionIndex();
       emits("focus", event);
       emits("open", listOpened.value);
     };
-    function toggleList(event) {
+    function focusMainInput() {
       var _a, _b;
-      return listOpened.value ? closeList(event) : ((_b = (_a = mazInputComponent.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus()) ?? openList();
+      (_b = (_a = mazInputComponent.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus();
+    }
+    function toggleList(event) {
+      listOpened.value ? closeList(event) : focusMainInput();
     }
     function focusSearchInputAndSetQuery(q) {
       var _a;
@@ -718,7 +746,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         tmpModelValueIndex.value = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
           (option) => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey]
         );
-        scrollToSelected(tmpModelValueIndex.value);
+        if (typeof tmpModelValueIndex.value === "number" && tmpModelValueIndex.value >= 0) {
+          scrollToOptionIndex(tmpModelValueIndex.value);
+        }
       }
       debounceCallback(() => {
         query.value = "";
@@ -737,13 +767,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const keyboardHandler = (event) => {
       const code = event.code;
       const isArrow = ["ArrowUp", "ArrowDown"].includes(code);
-      const isEnter = "Enter" === code;
-      const isEscape = "Escape" === code && hasListOpened.value;
+      const shouldSelect = ["Enter", "Space"].includes(code);
+      const shouldCloseList = "Escape" === code && hasListOpened.value;
       if (isArrow) {
         arrowHandler(event, tmpModelValueIndex.value);
-      } else if (isEnter) {
+      } else if (shouldSelect) {
         enterHandler(event, tmpModelValueIndex.value);
-      } else if (isEscape) {
+      } else if (shouldCloseList) {
         closeList();
       }
     };
@@ -768,7 +798,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       } else {
         tmpModelValueIndex.value = code === "ArrowDown" ? 0 : optionsLength - 1;
       }
-      scrollToSelected(tmpModelValueIndex.value);
+      scrollToOptionIndex(tmpModelValueIndex.value);
     };
     const enterHandler = (event, currentIndex) => {
       var _a, _b, _c;
@@ -781,40 +811,61 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         updateValue(newValue);
       }
     };
-    async function scrollToSelected(index) {
-      var _a, _b, _c;
+    async function scrollToOptionIndex(index) {
+      var _a, _b;
       await nextTick();
-      const selectedIndex = index ?? ((_a = optionsList.value) == null ? void 0 : _a.findIndex(
-        (option) => {
-          var _a2;
-          return ((_a2 = selectedOption.value) == null ? void 0 : _a2[props.optionValueKey]) === option[props.optionValueKey];
-        }
-      ));
-      if (typeof selectedIndex === "number") {
-        if (!tmpModelValueIndex.value)
-          tmpModelValueIndex.value = selectedIndex;
-        (_c = (_b = optionsListElement.value) == null ? void 0 : _b.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _c.scrollIntoView({
+      if (typeof index !== "number") {
+        updateTmpModelValueIndex();
+      }
+      const selectedIndex = index ?? tmpModelValueIndex.value;
+      if (typeof selectedIndex === "number" && selectedIndex >= 0) {
+        (_b = (_a = optionsListElement.value) == null ? void 0 : _a.querySelectorAll(".m-select-list-item")[selectedIndex]) == null ? void 0 : _b.scrollIntoView({
           behavior: "auto",
           block: "nearest",
           inline: "start"
         });
       }
     }
-    function updateTmpModelValueIndex() {
+    function updateTmpModelValueIndex(inputOption) {
       var _a;
-      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex(
-        (option) => selectedOption[props.optionValueKey] === option[props.optionValueKey]
-      );
-      tmpModelValueIndex.value = index && index >= 0 ? index : void 0;
+      const index = (_a = optionsList.value) == null ? void 0 : _a.findIndex((option) => {
+        var _a2, _b;
+        if (props.multiple && Array.isArray(props.modelValue)) {
+          if (inputOption) {
+            return inputOption[props.optionValueKey] === option[props.optionValueKey];
+          }
+          const values = [...props.modelValue].reverse();
+          return values[0] === option[props.optionValueKey];
+        } else {
+          return ((_b = (_a2 = selectedOptions.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b[props.optionValueKey]) === option[props.optionValueKey];
+        }
+      });
+      tmpModelValueIndex.value = index && index >= 0 ? index : 0;
     }
-    const updateValue = (selectedOption2, mustCloseList = true) => {
-      if (mustCloseList) {
+    const updateValue = (inputOption, mustCloseList = true) => {
+      var _a;
+      if (mustCloseList && !props.multiple) {
         nextTick(() => closeList());
       }
       searchQuery.value = "";
-      emits("update:model-value", selectedOption2[props.optionValueKey]);
-      emits("selected-option", selectedOption2);
-      updateTmpModelValueIndex();
+      const isAlreadySelected = (_a = selectedOptions.value) == null ? void 0 : _a.some(
+        (option) => option[props.optionValueKey] === inputOption[props.optionValueKey]
+      );
+      let newValue = selectedOptions.value;
+      if (isAlreadySelected && props.multiple) {
+        newValue = newValue == null ? void 0 : newValue.filter(
+          (option) => option[props.optionValueKey] !== inputOption[props.optionValueKey]
+        );
+      } else if (props.multiple) {
+        newValue.push(inputOption);
+      } else {
+        newValue = [inputOption];
+      }
+      const selectedValues = newValue.map((option) => option[props.optionValueKey]);
+      emits("update:model-value", props.multiple ? selectedValues : selectedValues[0]);
+      emits("selected-option", inputOption);
+      updateTmpModelValueIndex(inputOption);
+      focusMainInput();
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
@@ -840,6 +891,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             size: __props.size,
             disabled: __props.disabled,
             onFocus: withModifiers(openList, ["prevent", "stop"]),
+            onClick: withModifiers(openList, ["prevent", "stop"]),
             onChange: _cache[0] || (_cache[0] = ($event) => emits("change", $event)),
             onKeydown: mainInputKeyboardHandler
           }), {
@@ -855,7 +907,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled", "onFocus"]),
+          }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled", "onFocus", "onClick"]),
           createVNode(Transition, { name: listTransition.value }, {
             default: withCtx(() => [
               hasListOpened.value ? (openBlock(), createElementBlock(
@@ -901,7 +953,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       /* STABLE */
                     }, 8, ["modelValue", "color", "placeholder"])
                   ])) : createCommentVNode("v-if", true),
-                  createCommentVNode(" No results slot - Displayed when no results corresponding with seeach query "),
+                  createCommentVNode("\n          @slot No results slot - Displayed when no results corresponding with seeach query\n        "),
                   !optionsList.value || optionsList.value.length <= 0 ? renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
                     createElementVNode("span", _hoisted_3, [
                       createVNode(unref(NoSymbolIcon), { class: "maz-h-6 maz-w-6 maz-text-normal" })
@@ -911,7 +963,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       Fragment,
                       null,
                       renderList(optionsList.value, (option, i) => {
-                        var _a, _b, _c;
                         return openBlock(), createElementBlock("button", {
                           key: i,
                           tabindex: "-1",
@@ -919,18 +970,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                           class: normalizeClass(["m-select-list-item maz-custom", [
                             {
                               "--is-keyboard-selected": tmpModelValueIndex.value === i,
-                              "--is-selected": ((_a = selectedOption.value) == null ? void 0 : _a[__props.optionValueKey]) === option[__props.optionValueKey] && !isNullOrUndefined(option[__props.optionValueKey]),
+                              "--is-selected": isSelectedOption(option),
                               "--is-none-value": isNullOrUndefined(option[__props.optionValueKey])
-                            },
-                            `--${__props.color}`
+                            }
                           ]]),
                           style: normalizeStyle({ minHeight: `${__props.itemHeight}px` }),
                           onClick: withModifiers(($event) => updateValue(option), ["prevent", "stop"])
                         }, [
+                          __props.multiple ? (openBlock(), createBlock(unref(MazCheckbox), {
+                            key: 0,
+                            tabindex: "-1",
+                            "model-value": isSelectedOption(option),
+                            size: "sm",
+                            color: __props.color
+                          }, null, 8, ["model-value", "color"])) : createCommentVNode("v-if", true),
+                          createCommentVNode("\n              @slot Custom option\n                @binding {Object} option\n                @binding {Boolean} is-selected\n            "),
                           renderSlot(_ctx.$slots, "default", {
                             option,
-                            isSelected: ((_b = selectedOption.value) == null ? void 0 : _b[__props.optionValueKey]) === option[__props.optionValueKey],
-                            selectedOption: (_c = selectedOption.value) == null ? void 0 : _c[__props.optionValueKey]
+                            isSelected: isSelectedOption(option)
                           }, () => [
                             createElementVNode(
                               "span",
@@ -961,8 +1018,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MazSelect_vue_vue_type_style_index_0_scoped_2589528b_lang = "";
-const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2589528b"]]);
+const MazSelect_vue_vue_type_style_index_0_scoped_6ebd3ef8_lang = "";
+const MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6ebd3ef8"]]);
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
   key: 0,
@@ -1297,8 +1354,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b;
       (_b = (_a = CountrySelector.value) == null ? void 0 : _a.$el.querySelector("input")) == null ? void 0 : _b.focus();
     }
-    function focusPhoneNumberInput() {
+    async function focusPhoneNumberInput() {
       var _a;
+      await nextTick();
       (_a = getPhoneNumberInput()) == null ? void 0 : _a.focus();
     }
     return (_ctx, _cache) => {
@@ -1415,9 +1473,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_6478d9a7_lang = "";
-const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6478d9a7"]]);
+const MazPhoneNumberInput_vue_vue_type_style_index_0_scoped_2cc88337_lang = "";
+const MazPhoneNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2cc88337"]]);
 export {
   MazPhoneNumberInput as M,
-  _export_sfc as _
+  _export_sfc as _,
+  useInstanceUniqId as u
 };