@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/mozaic-vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mozaic-vue.js","sources":["../src/components/badge/MBadge.vue","../src/components/loader/MLoader.vue","../src/components/button/MButton.vue","../src/components/checkbox/MCheckbox.vue","../src/components/checkboxgroup/MCheckboxGroup.vue","../src/components/field/MField.vue","../src/components/fieldgroup/MFieldGroup.vue","../src/components/iconbutton/MIconButton.vue","../src/components/link/MLink.vue","../node_modules/@mozaic-ds/icons-vue/src/components/More24/More24.vue","../node_modules/@mozaic-ds/icons-vue/src/components/Less24/Less24.vue","../src/components/quantityselector/MQuantitySelector.vue","../src/components/radio/MRadio.vue","../src/components/radiogroup/MRadioGroup.vue","../src/components/select/MSelect.vue","../src/components/statusbadge/MStatusDot.vue","../src/components/statusbadge/MStatusBadge.vue","../src/components/textarea/MTextArea.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue","../src/components/textinput/MTextInput.vue","../src/components/toggle/MToggle.vue"],"sourcesContent":["<template>\n  <span class=\"mc-badge\" :class=\"classObject\">\n    {{ label }}\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Content of the badge\n     */\n    label: number;\n    /**\n     * Allows to define the Badge style\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the Badge size\n     */\n    size?: 's' | 'm';\n  }>(),\n  {\n    appearance: 'standard',\n    size: 's',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-badge--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-badge--${props.size}`]: props.size && props.size != 's',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/badge';\n</style>\n","<template>\n  <div class=\"mc-loader\" :class=\"classObject\">\n    <span class=\"mc-loader__spinner\">\n      <svg\n        class=\"mc-loader__icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        :viewBox=\"setViewBox\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          class=\"mc-loader__path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          :r=\"setCircleRadius\"\n        ></circle>\n      </svg>\n    </span>\n    <p v-if=\"text\" class=\"mc-loader__text\" role=\"status\">{{ text }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-loader--${props.size}`]: props.size && props.size !== 'm',\n    [`mc-loader--${props.appearance}`]:\n      props.appearance && props.appearance !== 'standard',\n  };\n});\n\nconst setViewBox = computed(() => {\n  let viewBox: string;\n\n  switch (props.size) {\n    case 's':\n      viewBox = '0 0 24 24';\n      break;\n    case 'l':\n      viewBox = '0 0 64 64';\n      break;\n    default:\n      viewBox = '0 0 32 32';\n  }\n  return viewBox;\n});\n\nconst setCircleRadius = computed(() => {\n  let circleRadius: number;\n\n  switch (props.size) {\n    case 's':\n      circleRadius = 6;\n      break;\n    case 'l':\n      circleRadius = 19;\n      break;\n    default:\n      circleRadius = 9;\n  }\n\n  return circleRadius;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/loader';\n</style>\n","<template>\n  <button\n    class=\"mc-button\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n  >\n    <span\n      v-if=\"$slots.icon && iconPosition == 'left' && !isLoading\"\n      class=\"mc-button__icon\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-if=\"isLoading\"\n      class=\"mc-button__icon\"\n      :style=\"{ position: 'absolute' }\"\n    >\n      <MLoader :style=\"{ color: 'currentColor' }\" size=\"s\" />\n    </span>\n    <span v-if=\"$slots.icon && iconPosition == 'only'\" class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-else\n      class=\"mc-button__label\"\n      :style=\"{ visibility: isLoading ? 'hidden' : 'visible' }\"\n    >\n      <slot>Button Label</slot>\n    </span>\n    <span\n      v-if=\"$slots.icon && iconPosition == 'right' && !isLoading\"\n      class=\"mc-button__icon\"\n    >\n      <slot name=\"icon\" />\n    </span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\nimport MLoader from '../loader/MLoader.vue';\n/**\n * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconPosition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isLoading?: boolean;\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n    type: 'button',\n  },\n);\n\ndefineSlots<{\n  /**\n   * The content displayed in the button.\n   */\n  default: string;\n  /**\n   * Use this slot to insert an icon for the Button\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-button--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-button--${props.size}`]: props.size && props.size != 'm',\n    'mc-button--ghost': props.ghost,\n    'mc-button--outlined': props.outlined,\n    'mc-button--icon-only': props.iconPosition == 'only',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template>\n  <div class=\"mc-checkbox\">\n    <input\n      :id=\"id\"\n      type=\"checkbox\"\n      class=\"mc-checkbox__input\"\n      :class=\"classObject\"\n      :name=\"name\"\n      :checked=\"modelValue\"\n      :indeterminate=\"indeterminate\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      v-bind=\"$attrs\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    <label v-if=\"label\" :for=\"id\" class=\"mc-checkbox__label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the checkbox, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The name attribute for the checkbox element, typically used for form submission.\n   */\n  name?: string;\n  /**\n   * The text label displayed next to the checkbox.\n   */\n  label?: string;\n  /**\n   * The checkbox's checked state, bound via v-model.\n   */\n  modelValue?: boolean;\n  /**\n   * Sets the checkbox to an indeterminate state (partially selected).\n   */\n  indeterminate?: boolean;\n  /**\n   * If `true`, applies an invalid state to the checkbox.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, disables the checkbox, making it non-interactive.\n   */\n  disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the checkbox value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/checkbox';\n</style>\n","<template>\n  <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n    <MCheckbox\n      v-for=\"option in options\"\n      :id=\"option.id\"\n      :key=\"option.id\"\n      :label=\"option.label\"\n      :is-invalid=\"option.isInvalid\"\n      :name=\"name\"\n      class=\"mc-field__item\"\n      :class=\"classObjectItem\"\n      :model-value=\"modelValue ? modelValue.includes(option.value) : undefined\"\n      :disabled=\"option.disabled\"\n      @update:model-value=\"(v: boolean) => onChange(v, option.value)\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport MCheckbox from '../checkbox/MCheckbox.vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name: string;\n  /**\n   * Property used to manage the values checked by v-model\n   * (Do not use directly)\n   */\n  modelValue?: Array<string>;\n  /**\n   * list of properties of each radio button of the radio group\n   */\n  options: Array<{\n    id: string;\n    label: string;\n    value: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n  }>;\n  /**\n   * If `true`, make the form element of the group inline.\n   */\n  inline?: boolean;\n}>();\n\nconst selectedValue = ref<string[]>([]);\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    selectedValue.value = newValue || [];\n  },\n  { immediate: true },\n);\n\nconst onChange = (isChecked: boolean, value: string) => {\n  let values = [...selectedValue.value];\n\n  if (isChecked && !values.includes(value)) {\n    values.push(value);\n  } else {\n    values = values.filter((val) => val !== value);\n  }\n\n  emit('update:modelValue', values);\n  selectedValue.value = values;\n};\n\nconst classObjectContainer = computed(() => {\n  return {\n    'mc-field__container--inline': props.inline,\n  };\n});\n\nconst classObjectItem = computed(() => {\n  return {\n    'mc-field__container--inline__item': props.inline,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the checkbox group value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: Array<string>): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <div class=\"mc-field\">\n    <label class=\"mc-field__label\" :for=\"id\">\n      {{ label }}\n      <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n        >({{ requirementText }})</span\n      >\n    </label>\n\n    <span v-if=\"helpId && helpText\" :id=\"helpId\" class=\"mc-field__help\">{{\n      helpText\n    }}</span>\n\n    <div class=\"mc-field__content\">\n      <slot />\n    </div>\n\n    <span\n      v-if=\"(isValid || isInvalid) && message\"\n      class=\"mc-field__validation-message\"\n      :id=\"messageId\"\n      :class=\"classObjectValidation\"\n    >\n      {{ message }}\n    </span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the form field, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The text displayed as the label for the form field.\n   */\n  label: string;\n  /**\n   * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n   */\n  requirementText?: string;\n  /**\n   * Text shown below the form field to provide additional context or instructions for the user.\n   */\n  helpText?: string;\n  /**\n   * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n   */\n  helpId?: string;\n  /**\n   * If `true`, applies a valid state to the form field.\n   */\n  isValid?: boolean;\n  /**\n   * If `true`, applies an invalid state to the form field.\n   */\n  isInvalid?: boolean;\n  /**\n   * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n   */\n  messageId?: string;\n  /**\n   * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n   */\n  message?: string;\n}>();\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n  return {\n    'is-valid': props.isValid,\n    'is-invalid': props.isInvalid,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <fieldset class=\"mc-field--group\">\n    <legend class=\"mc-field__legend\" :for=\"id\">\n      {{ legend }}\n      <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n        >({{ requirementText }})</span\n      >\n    </legend>\n\n    <span v-if=\"helpText\" class=\"mc-field__help\">{{ helpText }}</span>\n\n    <div class=\"mc-field__content\">\n      <slot />\n    </div>\n\n    <span\n      v-if=\"(isValid || isInvalid) && message\"\n      class=\"mc-field__validation-message\"\n      :class=\"classObjectValidation\"\n    >\n      {{ message }}\n    </span>\n  </fieldset>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the form field, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The text displayed as the legend for the form fieldset.\n   */\n  legend: string;\n  /**\n   * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n   */\n  requirementText?: string;\n  /**\n   * Text shown below the form field to provide additional context or instructions for the user.\n   */\n  helpText?: string;\n  /**\n   * If `true`, applies a valid state to the form field.\n   */\n  isValid?: boolean;\n  /**\n   * If `true`, applies an invalid state to the form field.\n   */\n  isInvalid?: boolean;\n  /**\n   * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n   */\n  message?: string;\n}>();\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n  return {\n    'is-valid': props.isValid,\n    'is-invalid': props.isInvalid,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <button\n    class=\"mc-button mc-button--icon-button\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n  >\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n    type: 'button',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  icon: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-button--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-button--${props.size}`]: props.size && props.size != 'm',\n    'mc-button--ghost': props.ghost,\n    'mc-button--outlined': props.outlined,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template>\n  <component\n    :is=\"router ? 'router-link' : 'a'\"\n    class=\"mc-link\"\n    :class=\"classObject\"\n    :href=\"href\"\n    :target=\"target\"\n    :to=\"router ? href : undefined\"\n  >\n    <span\n      v-if=\"$slots.icon && iconPosition == 'left'\"\n      class=\"mc-link__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span class=\"mc-link__label\">\n      <slot />\n    </span>\n    <span\n      v-if=\"$slots.icon && iconPosition == 'right'\"\n      class=\"mc-link__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconPosition?: 'left' | 'right';\n    /**\n     * Allows to define the link style\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size\n     */\n    size?: 's' | 'm';\n    /**\n     * URL for the link (for external links or the `to` prop for `router-link`).\n     */\n    href?: string;\n    /**\n     * Where to open the link\n     */\n    target?: string;\n    /**\n     * Specify wether the link is inline\n     */\n    inline?: boolean;\n    /**\n     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).\n     */\n    router?: boolean;\n  }>(),\n  {\n    href: undefined,\n    target: undefined,\n    appearance: 'standard',\n    size: 's',\n    iconPosition: 'left',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the textual content of the Link\n   */\n  default: string;\n  /**\n   * Use this slot to insert an icon for the Link\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-link--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-link--${props.size}`]: props.size && props.size != 's',\n    'mc-link--inline': props.inline,\n    'mc-link--stand-alone': !props.inline,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/link';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'More24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'Less24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template>\n  <div class=\"mc-quantity-selector\" :class=\"classObject\">\n    <input\n      :id=\"id\"\n      v-model=\"currentValue\"\n      class=\"mc-quantity-selector__control\"\n      type=\"number\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :readonly=\"readonly\"\n      :aria-invalid=\"isInvalid\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuenow=\"currentValue\"\n      v-bind=\"$attrs\"\n      @change=\"onChange(Number(($event.target as HTMLInputElement).value))\"\n    />\n    <button\n      v-if=\"!readonly\"\n      type=\"button\"\n      :aria-controls=\"id\"\n      class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n      tabindex=\"-1\"\n      :disabled=\"disabled || currentValue === max\"\n      @click=\"increment\"\n    >\n      <span class=\"mc-quantity-selector__icon\">\n        <More24 />\n      </span>\n      <span class=\"mc-quantity-selector__label\">{{ incrementlabel }}</span>\n    </button>\n    <button\n      v-if=\"!readonly\"\n      type=\"button\"\n      :aria-controls=\"id\"\n      class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n      tabindex=\"-1\"\n      :disabled=\"disabled || currentValue === min\"\n      @click=\"decrement\"\n    >\n      <span class=\"mc-quantity-selector__icon\">\n        <Less24 />\n      </span>\n      <span class=\"mc-quantity-selector__label\">{{ decrementLabel }}</span>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';\nimport Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';\n\n/**\n * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    modelValue?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementLabel?: string;\n  }>(),\n  {\n    modelValue: 1,\n    min: 1,\n    max: 100,\n    step: 1,\n    size: 'm',\n    name: 'quantity-selector-input',\n    incrementlabel: 'Increment',\n    decrementLabel: 'Decrement',\n  },\n);\n\nconst currentValue = ref(props.modelValue);\n\nwatch(currentValue, (newVal) => {\n  if (newVal !== props.modelValue) {\n    emit('update:modelValue', newVal);\n  }\n});\n\nconst classObject = computed(() => {\n  return {\n    [`mc-quantity-selector--${props.size}`]: props.size && props.size != 'm',\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst increment = () => {\n  if (currentValue.value + props.step <= props.max) {\n    currentValue.value += props.step;\n  } else {\n    currentValue.value = props.max;\n  }\n};\n\nconst decrement = () => {\n  if (currentValue.value - props.step > props.min) {\n    currentValue.value -= props.step;\n  } else {\n    currentValue.value = props.min;\n  }\n};\n\nconst onChange = (value: number) => {\n  currentValue.value = value;\n\n  if (currentValue.value > props.max) {\n    currentValue.value = props.max;\n  }\n  if (currentValue.value <= props.min) {\n    currentValue.value = props.min;\n  }\n\n  emit('update:modelValue', currentValue.value);\n};\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the quantity selector value changes, updating the `modelValue` prop.\n   */\n  (on: 'update:modelValue', value: number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n","<template>\n  <div class=\"mc-radio\">\n    <input\n      :id=\"id\"\n      type=\"radio\"\n      class=\"mc-radio__input\"\n      :class=\"classObject\"\n      :name=\"name\"\n      :checked=\"modelValue\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      v-bind=\"$attrs\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    <label v-if=\"label\" :for=\"id\" class=\"mc-radio__label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the radio, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name?: string;\n  /**\n   * The text label displayed next to the radio.\n   */\n  label?: string;\n  /**\n   * The radio's checked state, bound via v-model.\n   */\n  modelValue?: boolean;\n  /**\n   * If `true`, applies an invalid state to the radio.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, disables the radio, making it non-interactive.\n   */\n  disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the radio value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/radio';\n</style>\n","<template>\n  <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n    <MRadio\n      v-for=\"option in options\"\n      :id=\"option.id\"\n      :key=\"option.id\"\n      :label=\"option.label\"\n      :is-invalid=\"isInvalid\"\n      :name=\"name\"\n      class=\"mc-field__item\"\n      :class=\"classObjectItem\"\n      :model-value=\"modelValue === option.value\"\n      :disabled=\"option.disabled\"\n      @update:model-value=\"\n        (v: boolean) => (v ? emit('update:modelValue', option.value) : null)\n      \"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MRadio from '../radio/MRadio.vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name: string;\n  /**\n   * Property used to manage the values checked by v-model\n   * (Do not use directly)\n   */\n  modelValue?: string;\n  /**\n   * list of properties of each radio button of the radio group\n   */\n  options: Array<{\n    id: string;\n    label: string;\n    value: string;\n    disabled?: boolean;\n  }>;\n  /**\n   * If `true`, applies an invalid state to the radio group.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, make the form element of the group inline.\n   */\n  inline?: boolean;\n}>();\n\nconst classObjectContainer = computed(() => {\n  return {\n    'mc-field__container--inline': props.inline,\n  };\n});\n\nconst classObjectItem = computed(() => {\n  return {\n    'mc-field__container--inline__item': props.inline,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the radio group value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <select\n    :id=\"id\"\n    class=\"mc-select\"\n    :name=\"name\"\n    :value=\"modelValue\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    v-bind=\"$attrs\"\n    @change=\"\n      emit('update:modelValue', ($event.target as HTMLSelectElement).value)\n    \"\n  >\n    <option v-if=\"placeholder\" value=\"\" disabled>\n      -- {{ placeholder }} --\n    </option>\n    <option\n      v-for=\"(option, index) in options\"\n      :key=\"index\"\n      :value=\"option.value\"\n      v-bind=\"option.attributes\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.text }}\n    </option>\n  </select>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      attributes?: Record<string, string | boolean | number>;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    modelValue?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }>(),\n  {\n    size: 'm',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-select--${props.size}`]: props.size && props.size != 'm',\n    'mc-select--readonly': props.readonly,\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the select value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/select';\n</style>\n","<template>\n  <span class=\"mc-status-dot\" :class=\"classObject\"></span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Allows to define the Status Dot style\n     */\n    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n  }>(),\n  {\n    appearance: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-dot--${props.appearance}`]:\n      props.appearance && props.appearance != 'info',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-dot';\n</style>\n","<template>\n  <div class=\"mc-status-badge\" :class=\"classObject\">\n    <MStatusDot :appearance=\"appearance\" />\n    <span class=\"mc-status-badge__label\">{{ label }}</span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MStatusDot from './MStatusDot.vue';\n/**\n * A status badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Content of the Status Badge\n     */\n    label: string;\n    /**\n     * Allows to define the Status Badge style\n     */\n    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n  }>(),\n  {\n    appearance: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-badge--${props.appearance}`]:\n      props.appearance && props.appearance != 'info',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-badge';\n</style>\n","<template>\n  <textarea\n    :id=\"id\"\n    class=\"mc-textarea\"\n    :class=\"classObject\"\n    :aria-invalid=\"isInvalid\"\n    :value=\"modelValue\"\n    :name=\"name\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :minlength=\"minLength\"\n    :maxlength=\"maxLength\"\n    :rows=\"rows\"\n    :readonly=\"readonly\"\n    v-bind=\"$attrs\"\n    @input=\"\n      emit('update:modelValue', ($event.target as HTMLInputElement).value)\n    \"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    modelValue?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minLength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxLength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }>(),\n  {\n    rows: 2,\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the textarea value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/textarea';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'CrossCircleFilled24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template>\n  <div class=\"mc-text-input\" :class=\"classObject\">\n    <span v-if=\"$slots.icon\" class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n\n    <input\n      :id=\"id\"\n      class=\"mc-text-input__control\"\n      :value=\"modelValue\"\n      :type=\"inputType\"\n      :name=\"name\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      :readonly=\"readonly\"\n      v-bind=\"$attrs\"\n      @input=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).value)\n      \"\n    />\n\n    <div v-if=\"isClearable && modelValue\" class=\"mc-controls-options\">\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        @click=\"clearValue\"\n      >\n        <CrossCircleFilled24\n          class=\"mc-controls-options__icon\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mc-controls-options__label\">{clearLabel}</span>\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, type VNode } from 'vue';\nimport CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';\n\n/**\n * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    modelValue?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input\n     */\n    inputType?:\n      | 'date'\n      | 'email'\n      | 'number'\n      | 'password'\n      | 'search'\n      | 'tel'\n      | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isClearable?: boolean;\n    /**\n     * The label text for the clear button\n     */\n    clearLabel?: string;\n  }>(),\n  {\n    inputType: 'text',\n    size: 'm',\n    clearLabel: 'clear content',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert an icon in the input\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-text-input--${props.size}`]: props.size && props.size != 'm',\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst modelValue = ref(props.modelValue);\nconst clearValue = () => {\n  modelValue.value = '';\n  emit('update:modelValue', '');\n};\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the input value changes, updating the `modelValue` prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/controls-options';\n@use '@mozaic-ds/styles/components/text-input';\n</style>\n","<template>\n  <div class=\"mc-toggle\" :class=\"classObject\">\n    <label class=\"mc-toggle__container\" :for=\"id\">\n      <input\n        :id=\"id\"\n        type=\"checkbox\"\n        class=\"mc-toggle__input\"\n        :name=\"name\"\n        :checked=\"modelValue\"\n        :disabled=\"disabled\"\n        v-bind=\"$attrs\"\n        @change=\"\n          emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n        \"\n      />\n      <span v-if=\"label\" :for=\"id\" class=\"mc-toggle__label\">\n        {{ label }}\n      </span>\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and \"on/off\" switch.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the toggle, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the toggle element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the toggle.\n     */\n    label?: string;\n    /**\n     * The toggle's checked state, bound via v-model.\n     */\n    modelValue?: boolean;\n    /**\n     * Determines the size of the toggle\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, disables the toggle, making it non-interactive.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    size: 's',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-toggle--${props.size}`]: props.size && props.size != 's',\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the toggle value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["props","__props","classObject","computed","setViewBox","viewBox","setCircleRadius","circleRadius","emit","__emit","selectedValue","ref","watch","newValue","onChange","isChecked","value","values","val","classObjectContainer","classObjectItem","classObjectValidation","_sfc_main$b","_hoisted_1","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_createElementVNode","_sfc_main$a","currentValue","newVal","increment","decrement","_sfc_main$2","modelValue","clearValue"],"mappings":"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","x_google_ignoreList":[9,10,18]}

package/dist/mozaic-vue.umd.cjs

@@ -0,0 +1,2 @@
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.MozaicVue={},m.Vue))})(this,function(m,e){"use strict";const B=e.defineComponent({__name:"MBadge",props:{label:{},appearance:{default:"standard"},size:{default:"s"}},setup(l){const t=l,o=e.computed(()=>({[`mc-badge--${t.appearance}`]:t.appearance&&t.appearance!="standard",[`mc-badge--${t.size}`]:t.size&&t.size!="s"}));return(a,s)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["mc-badge",o.value])},e.toDisplayString(a.label),3))}}),p=(l,t)=>{const o=l.__vccOpts||l;for(const[a,s]of t)o[a]=s;return o},h=p(B,[["__scopeId","data-v-b427cc61"]]),y={class:"mc-loader__spinner"},$=["viewBox"],g=["r"],V={key:0,class:"mc-loader__text",role:"status"},f=p(e.defineComponent({__name:"MLoader",props:{appearance:{default:"standard"},size:{default:"m"},text:{}},setup(l){const t=l,o=e.computed(()=>({[`mc-loader--${t.size}`]:t.size&&t.size!=="m",[`mc-loader--${t.appearance}`]:t.appearance&&t.appearance!=="standard"})),a=e.computed(()=>{let n;switch(t.size){case"s":n="0 0 24 24";break;case"l":n="0 0 64 64";break;default:n="0 0 32 32"}return n}),s=e.computed(()=>{let n;switch(t.size){case"s":n=6;break;case"l":n=19;break;default:n=9}return n});return(n,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-loader",o.value])},[e.createElementVNode("span",y,[(e.openBlock(),e.createElementBlock("svg",{class:"mc-loader__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:a.value,"aria-hidden":"true"},[e.createElementVNode("circle",{class:"mc-loader__path",cx:"50%",cy:"50%",r:s.value},null,8,g)],8,$))]),n.text?(e.openBlock(),e.createElementBlock("p",V,e.toDisplayString(n.text),1)):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-56c66912"]]),C=["disabled","type"],E={key:0,class:"mc-button__icon"},M={key:1,class:"mc-button__icon",style:{position:"absolute"}},N={key:2,class:"mc-button__icon"},I={key:4,class:"mc-button__icon"},z=p(e.defineComponent({__name:"MButton",props:{appearance:{default:"standard"},size:{default:"m"},disabled:{type:Boolean},ghost:{type:Boolean},outlined:{type:Boolean},iconPosition:{},type:{default:"button"},isLoading:{type:Boolean}},setup(l){const t=l,o=e.computed(()=>({[`mc-button--${t.appearance}`]:t.appearance&&t.appearance!="standard",[`mc-button--${t.size}`]:t.size&&t.size!="m","mc-button--ghost":t.ghost,"mc-button--outlined":t.outlined,"mc-button--icon-only":t.iconPosition=="only"}));return(a,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["mc-button",o.value]),disabled:a.disabled,type:a.type},[a.$slots.icon&&a.iconPosition=="left"&&!a.isLoading?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0),a.isLoading?(e.openBlock(),e.createElementBlock("span",M,[e.createVNode(f,{style:{color:"currentColor"},size:"s"})])):e.createCommentVNode("",!0),a.$slots.icon&&a.iconPosition=="only"?(e.openBlock(),e.createElementBlock("span",N,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",{key:3,class:"mc-button__label",style:e.normalizeStyle({visibility:a.isLoading?"hidden":"visible"})},[e.renderSlot(a.$slots,"default",{},()=>[s[0]||(s[0]=e.createTextVNode("Button Label"))],!0)],4)),a.$slots.icon&&a.iconPosition=="right"&&!a.isLoading?(e.openBlock(),e.createElementBlock("span",I,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0)],10,C))}}),[["__scopeId","data-v-f4f43ab6"]]),S={class:"mc-checkbox"},w=["id","name","checked","indeterminate","disabled","aria-invalid"],L=["for"],b=p(e.defineComponent({__name:"MCheckbox",props:{id:{},name:{},label:{},modelValue:{type:Boolean},indeterminate:{type:Boolean},isInvalid:{type:Boolean},disabled:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({"is-invalid":o.isInvalid})),s=t;return(n,c)=>(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("input",e.mergeProps({id:n.id,type:"checkbox",class:["mc-checkbox__input",a.value],name:n.name,checked:n.modelValue,indeterminate:n.indeterminate,disabled:n.disabled,"aria-invalid":n.isInvalid},n.$attrs,{onChange:c[0]||(c[0]=d=>s("update:modelValue",d.target.checked))}),null,16,w),n.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:n.id,class:"mc-checkbox__label"},e.toDisplayString(n.label),9,L)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-37fd0a35"]]),T=p(e.defineComponent({__name:"MCheckboxGroup",props:{name:{},modelValue:{},options:{},inline:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.ref([]);e.watch(()=>o.modelValue,r=>{a.value=r||[]},{immediate:!0});const s=(r,i)=>{let _=[...a.value];r&&!_.includes(i)?_.push(i):_=_.filter(u=>u!==i),d("update:modelValue",_),a.value=_},n=e.computed(()=>({"mc-field__container--inline":o.inline})),c=e.computed(()=>({"mc-field__container--inline__item":o.inline})),d=t;return(r,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-field__container",n.value])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,_=>(e.openBlock(),e.createBlock(b,{id:_.id,key:_.id,label:_.label,"is-invalid":_.isInvalid,name:r.name,class:e.normalizeClass(["mc-field__item",c.value]),"model-value":r.modelValue?r.modelValue.includes(_.value):void 0,disabled:_.disabled,"onUpdate:modelValue":u=>s(u,_.value)},null,8,["id","label","is-invalid","name","class","model-value","disabled","onUpdate:modelValue"]))),128))],2))}}),[["__scopeId","data-v-51af53d0"]]),O={class:"mc-field"},j=["for"],D={key:0,class:"mc-field__requirement"},q=["id"],P={class:"mc-field__content"},F=["id"],G=p(e.defineComponent({__name:"MField",props:{id:{},label:{},requirementText:{},helpText:{},helpId:{},isValid:{type:Boolean},isInvalid:{type:Boolean},messageId:{},message:{}},setup(l){const t=l,o=e.computed(()=>({"is-valid":t.isValid,"is-invalid":t.isInvalid}));return(a,s)=>(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("label",{class:"mc-field__label",for:a.id},[e.createTextVNode(e.toDisplayString(a.label)+" ",1),a.requirementText?(e.openBlock(),e.createElementBlock("span",D,"("+e.toDisplayString(a.requirementText)+")",1)):e.createCommentVNode("",!0)],8,j),a.helpId&&a.helpText?(e.openBlock(),e.createElementBlock("span",{key:0,id:a.helpId,class:"mc-field__help"},e.toDisplayString(a.helpText),9,q)):e.createCommentVNode("",!0),e.createElementVNode("div",P,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),(a.isValid||a.isInvalid)&&a.message?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["mc-field__validation-message",o.value]),id:a.messageId},e.toDisplayString(a.message),11,F)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-ead078c4"]]),R={class:"mc-field--group"},U=["for"],Z={key:0,class:"mc-field__requirement"},A={key:0,class:"mc-field__help"},Q={class:"mc-field__content"},H=p(e.defineComponent({__name:"MFieldGroup",props:{id:{},legend:{},requirementText:{},helpText:{},isValid:{type:Boolean},isInvalid:{type:Boolean},message:{}},setup(l){const t=l,o=e.computed(()=>({"is-valid":t.isValid,"is-invalid":t.isInvalid}));return(a,s)=>(e.openBlock(),e.createElementBlock("fieldset",R,[e.createElementVNode("legend",{class:"mc-field__legend",for:a.id},[e.createTextVNode(e.toDisplayString(a.legend)+" ",1),a.requirementText?(e.openBlock(),e.createElementBlock("span",Z,"("+e.toDisplayString(a.requirementText)+")",1)):e.createCommentVNode("",!0)],8,U),a.helpText?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(a.helpText),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),(a.isValid||a.isInvalid)&&a.message?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["mc-field__validation-message",o.value])},e.toDisplayString(a.message),3)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-fc0c08dc"]]),J=["disabled","type"],K={class:"mc-button__icon"},W=p(e.defineComponent({__name:"MIconButton",props:{appearance:{default:"standard"},size:{default:"m"},disabled:{type:Boolean},ghost:{type:Boolean},outlined:{type:Boolean},type:{default:"button"}},setup(l){const t=l,o=e.computed(()=>({[`mc-button--${t.appearance}`]:t.appearance&&t.appearance!="standard",[`mc-button--${t.size}`]:t.size&&t.size!="m","mc-button--ghost":t.ghost,"mc-button--outlined":t.outlined}));return(a,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["mc-button mc-button--icon-button",o.value]),disabled:a.disabled,type:a.type},[e.createElementVNode("span",K,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])],10,J))}}),[["__scopeId","data-v-abf78562"]]),X={key:0,class:"mc-link__icon","aria-hidden":"true"},Y={class:"mc-link__label"},v={key:1,class:"mc-link__icon","aria-hidden":"true"},x=p(e.defineComponent({__name:"MLink",props:{iconPosition:{default:"left"},appearance:{default:"standard"},size:{default:"s"},href:{default:void 0},target:{default:void 0},inline:{type:Boolean},router:{type:Boolean}},setup(l){const t=l,o=e.computed(()=>({[`mc-link--${t.appearance}`]:t.appearance&&t.appearance!="standard",[`mc-link--${t.size}`]:t.size&&t.size!="s","mc-link--inline":t.inline,"mc-link--stand-alone":!t.inline}));return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.router?"router-link":"a"),{class:e.normalizeClass(["mc-link",o.value]),href:a.href,target:a.target,to:a.router?a.href:void 0},{default:e.withCtx(()=>[a.$slots.icon&&a.iconPosition=="left"?(e.openBlock(),e.createElementBlock("span",X,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("span",Y,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),a.$slots.icon&&a.iconPosition=="right"?(e.openBlock(),e.createElementBlock("span",v,[e.renderSlot(a.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3},8,["class","href","target","to"]))}}),[["__scopeId","data-v-ad3d954f"]]),ee=["aria-labelledby"],ae=p(e.defineComponent({__name:"MOverlay",props:{isVisible:{type:Boolean},dialogLabel:{}},setup(l){return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-overlay",{"is-visible":t.isVisible}])},[e.createElementVNode("div",{role:"dialog",tabindex:"-1","aria-labelledby":t.dialogLabel},[e.renderSlot(t.$slots,"default",{},void 0,!0)],8,ee)],2))}}),[["__scopeId","data-v-db90fdb3"]]),te={name:"More24",props:{color:{type:String,default:"currentColor"}}},ne={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"};function oe(l,t,o,a,s,n){return e.openBlock(),e.createElementBlock("svg",ne,t[0]||(t[0]=[e.createElementVNode("g",{"clip-path":"url(#a)"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"})],-1),e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"a"},[e.createElementVNode("rect",{width:"24",height:"24",fill:"#fff"})])],-1)]))}const le=p(te,[["render",oe]]),se={name:"Less24",props:{color:{type:String,default:"currentColor"}}},ie={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"};function de(l,t,o,a,s,n){return e.openBlock(),e.createElementBlock("svg",ie,t[0]||(t[0]=[e.createElementVNode("g",{"clip-path":"url(#a)"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"})],-1),e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"a"},[e.createElementVNode("rect",{width:"24",height:"24",fill:"#fff"})])],-1)]))}const ce=p(se,[["render",de]]),re=["id","name","disabled","min","max","step","readonly","aria-invalid","aria-valuemin","aria-valuemax","aria-valuenow"],me=["aria-controls","disabled"],pe={class:"mc-quantity-selector__icon"},_e={class:"mc-quantity-selector__label"},ue=["aria-controls","disabled"],fe={class:"mc-quantity-selector__icon"},be={class:"mc-quantity-selector__label"},ke=p(e.defineComponent({__name:"MQuantitySelector",props:{id:{},name:{default:"quantity-selector-input"},modelValue:{default:1},isInvalid:{type:Boolean},disabled:{type:Boolean},size:{default:"m"},min:{default:1},max:{default:100},step:{default:1},readonly:{type:Boolean},incrementlabel:{default:"Increment"},decrementLabel:{default:"Decrement"}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.ref(o.modelValue);e.watch(a,i=>{i!==o.modelValue&&r("update:modelValue",i)});const s=e.computed(()=>({[`mc-quantity-selector--${o.size}`]:o.size&&o.size!="m","is-invalid":o.isInvalid})),n=()=>{a.value+o.step<=o.max?a.value+=o.step:a.value=o.max},c=()=>{a.value-o.step>o.min?a.value-=o.step:a.value=o.min},d=i=>{a.value=i,a.value>o.max&&(a.value=o.max),a.value<=o.min&&(a.value=o.min),r("update:modelValue",a.value)},r=t;return(i,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-quantity-selector",s.value])},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:i.id,"onUpdate:modelValue":_[0]||(_[0]=u=>a.value=u),class:"mc-quantity-selector__control",type:"number",name:i.name,disabled:i.disabled,min:i.min,max:i.max,step:i.step,readonly:i.readonly,"aria-invalid":i.isInvalid,"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":a.value},i.$attrs,{onChange:_[1]||(_[1]=u=>d(Number(u.target.value)))}),null,16,re),[[e.vModelText,a.value]]),i.readonly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-controls":i.id,class:"mc-quantity-selector__button mc-quantity-selector__button--increase",tabindex:"-1",disabled:i.disabled||a.value===i.max,onClick:n},[e.createElementVNode("span",pe,[e.createVNode(le)]),e.createElementVNode("span",_e,e.toDisplayString(i.incrementlabel),1)],8,me)),i.readonly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button","aria-controls":i.id,class:"mc-quantity-selector__button mc-quantity-selector__button--decrease",tabindex:"-1",disabled:i.disabled||a.value===i.min,onClick:c},[e.createElementVNode("span",fe,[e.createVNode(ce)]),e.createElementVNode("span",be,e.toDisplayString(i.decrementLabel),1)],8,ue))],2))}}),[["__scopeId","data-v-a732650a"]]),Be={class:"mc-radio"},he=["id","name","checked","disabled","aria-invalid"],ye=["for"],k=p(e.defineComponent({__name:"MRadio",props:{id:{},name:{},label:{},modelValue:{type:Boolean},isInvalid:{type:Boolean},disabled:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({"is-invalid":o.isInvalid})),s=t;return(n,c)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("input",e.mergeProps({id:n.id,type:"radio",class:["mc-radio__input",a.value],name:n.name,checked:n.modelValue,disabled:n.disabled,"aria-invalid":n.isInvalid},n.$attrs,{onChange:c[0]||(c[0]=d=>s("update:modelValue",d.target.checked))}),null,16,he),n.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:n.id,class:"mc-radio__label"},e.toDisplayString(n.label),9,ye)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-da78938c"]]),$e=p(e.defineComponent({__name:"MRadioGroup",props:{name:{},modelValue:{},options:{},isInvalid:{type:Boolean},inline:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({"mc-field__container--inline":o.inline})),s=e.computed(()=>({"mc-field__container--inline__item":o.inline})),n=t;return(c,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-field__container",a.value])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.options,r=>(e.openBlock(),e.createBlock(k,{id:r.id,key:r.id,label:r.label,"is-invalid":c.isInvalid,name:c.name,class:e.normalizeClass(["mc-field__item",s.value]),"model-value":c.modelValue===r.value,disabled:r.disabled,"onUpdate:modelValue":i=>i?n("update:modelValue",r.value):null},null,8,["id","label","is-invalid","name","class","model-value","disabled","onUpdate:modelValue"]))),128))],2))}}),[["__scopeId","data-v-d2f5e103"]]),ge=["id","name","value","disabled"],Ve={key:0,value:"",disabled:""},Ce=["value","disabled"],Ee=p(e.defineComponent({__name:"MSelect",props:{id:{},name:{},options:{},modelValue:{},placeholder:{},isInvalid:{type:Boolean},disabled:{type:Boolean},size:{default:"m"},readonly:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({[`mc-select--${o.size}`]:o.size&&o.size!="m","mc-select--readonly":o.readonly,"is-invalid":o.isInvalid})),s=t;return(n,c)=>(e.openBlock(),e.createElementBlock("select",e.mergeProps({id:n.id,class:["mc-select",a.value],name:n.name,value:n.modelValue,disabled:n.disabled},n.$attrs,{onChange:c[0]||(c[0]=d=>s("update:modelValue",d.target.value))}),[n.placeholder?(e.openBlock(),e.createElementBlock("option",Ve," -- "+e.toDisplayString(n.placeholder)+" -- ",1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(d,r)=>(e.openBlock(),e.createElementBlock("option",e.mergeProps({key:r,value:d.value,ref_for:!0},d.attributes,{disabled:d.disabled}),e.toDisplayString(d.text),17,Ce))),128))],16,ge))}}),[["__scopeId","data-v-68c735e4"]]),Me=p(e.defineComponent({__name:"MStatusDot",props:{appearance:{default:"info"}},setup(l){const t=l,o=e.computed(()=>({[`mc-status-dot--${t.appearance}`]:t.appearance&&t.appearance!="info"}));return(a,s)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["mc-status-dot",o.value])},null,2))}}),[["__scopeId","data-v-1d06a91e"]]),Ne={class:"mc-status-badge__label"},Ie=p(e.defineComponent({__name:"MStatusBadge",props:{label:{},appearance:{default:"info"}},setup(l){const t=l,o=e.computed(()=>({[`mc-status-badge--${t.appearance}`]:t.appearance&&t.appearance!="info"}));return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-status-badge",o.value])},[e.createVNode(Me,{appearance:a.appearance},null,8,["appearance"]),e.createElementVNode("span",Ne,e.toDisplayString(a.label),1)],2))}}),[["__scopeId","data-v-95fd9bb1"]]),ze=["id","aria-invalid","value","name","placeholder","disabled","minlength","maxlength","rows","readonly"],Se=p(e.defineComponent({__name:"MTextArea",props:{id:{},name:{},modelValue:{},placeholder:{},isInvalid:{type:Boolean},disabled:{type:Boolean},rows:{default:2},minLength:{},maxLength:{},readonly:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({"is-invalid":o.isInvalid})),s=t;return(n,c)=>(e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:n.id,class:["mc-textarea",a.value],"aria-invalid":n.isInvalid,value:n.modelValue,name:n.name,placeholder:n.placeholder,disabled:n.disabled,minlength:n.minLength,maxlength:n.maxLength,rows:n.rows,readonly:n.readonly},n.$attrs,{onInput:c[0]||(c[0]=d=>s("update:modelValue",d.target.value))}),null,16,ze))}}),[["__scopeId","data-v-8184b69c"]]),we={name:"CrossCircleFilled24",props:{color:{type:String,default:"currentColor"}}},Le={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"};function Te(l,t,o,a,s,n){return e.openBlock(),e.createElementBlock("svg",Le,t[0]||(t[0]=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"},null,-1)]))}const Oe=p(we,[["render",Te]]),je={key:0,class:"mc-text-input__icon"},De=["id","value","type","name","placeholder","disabled","aria-invalid","readonly"],qe={key:1,class:"mc-controls-options"},Pe=p(e.defineComponent({__name:"MTextInput",props:{id:{},name:{},modelValue:{},placeholder:{},inputType:{default:"text"},isInvalid:{type:Boolean},disabled:{type:Boolean},size:{default:"m"},readonly:{type:Boolean},isClearable:{type:Boolean},clearLabel:{default:"clear content"}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({[`mc-text-input--${o.size}`]:o.size&&o.size!="m","is-invalid":o.isInvalid})),s=e.ref(o.modelValue),n=()=>{s.value="",c("update:modelValue","")},c=t;return(d,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-text-input",a.value])},[d.$slots.icon?(e.openBlock(),e.createElementBlock("span",je,[e.renderSlot(d.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps({id:d.id,class:"mc-text-input__control",value:s.value,type:d.inputType,name:d.name,placeholder:d.placeholder,disabled:d.disabled,"aria-invalid":d.isInvalid,readonly:d.readonly},d.$attrs,{onInput:r[0]||(r[0]=i=>c("update:modelValue",i.target.value))}),null,16,De),d.isClearable&&s.value?(e.openBlock(),e.createElementBlock("div",qe,[e.createElementVNode("button",{type:"button",class:"mc-controls-options__button",onClick:n},[e.createVNode(Oe,{class:"mc-controls-options__icon","aria-hidden":"true"}),r[1]||(r[1]=e.createElementVNode("span",{class:"mc-controls-options__label"},"{clearLabel}",-1))])])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-38f67338"]]),Fe=["for"],Ge=["id","name","checked","disabled"],Re=["for"],Ue=p(e.defineComponent({__name:"MToggle",props:{id:{},name:{},label:{},modelValue:{type:Boolean},size:{default:"s"},disabled:{type:Boolean}},emits:["update:modelValue"],setup(l,{emit:t}){const o=l,a=e.computed(()=>({[`mc-toggle--${o.size}`]:o.size&&o.size!="s"})),s=t;return(n,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mc-toggle",a.value])},[e.createElementVNode("label",{class:"mc-toggle__container",for:n.id},[e.createElementVNode("input",e.mergeProps({id:n.id,type:"checkbox",class:"mc-toggle__input",name:n.name,checked:n.modelValue,disabled:n.disabled},n.$attrs,{onChange:c[0]||(c[0]=d=>s("update:modelValue",d.target.checked))}),null,16,Ge),n.label?(e.openBlock(),e.createElementBlock("span",{key:0,for:n.id,class:"mc-toggle__label"},e.toDisplayString(n.label),9,Re)):e.createCommentVNode("",!0)],8,Fe)],2))}}),[["__scopeId","data-v-5be734e7"]]);m.MBadge=h,m.MButton=z,m.MCheckbox=b,m.MCheckboxGroup=T,m.MField=G,m.MFieldGroup=H,m.MIconButton=W,m.MLink=x,m.MLoader=f,m.MOverlay=ae,m.MQuantitySelector=ke,m.MRadio=k,m.MRadioGroup=$e,m.MSelect=Ee,m.MStatusBadge=Ie,m.MTextArea=Se,m.MTextInput=Pe,m.MToggle=Ue,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=mozaic-vue.umd.cjs.map

package/dist/mozaic-vue.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mozaic-vue.umd.cjs","sources":["../src/components/badge/MBadge.vue","../src/components/loader/MLoader.vue","../src/components/button/MButton.vue","../src/components/checkbox/MCheckbox.vue","../src/components/checkboxgroup/MCheckboxGroup.vue","../src/components/field/MField.vue","../src/components/fieldgroup/MFieldGroup.vue","../src/components/iconbutton/MIconButton.vue","../src/components/link/MLink.vue","../node_modules/@mozaic-ds/icons-vue/src/components/More24/More24.vue","../node_modules/@mozaic-ds/icons-vue/src/components/Less24/Less24.vue","../src/components/quantityselector/MQuantitySelector.vue","../src/components/radio/MRadio.vue","../src/components/radiogroup/MRadioGroup.vue","../src/components/select/MSelect.vue","../src/components/statusbadge/MStatusDot.vue","../src/components/statusbadge/MStatusBadge.vue","../src/components/textarea/MTextArea.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue","../src/components/textinput/MTextInput.vue","../src/components/toggle/MToggle.vue"],"sourcesContent":["<template>\n  <span class=\"mc-badge\" :class=\"classObject\">\n    {{ label }}\n  </span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Content of the badge\n     */\n    label: number;\n    /**\n     * Allows to define the Badge style\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the Badge size\n     */\n    size?: 's' | 'm';\n  }>(),\n  {\n    appearance: 'standard',\n    size: 's',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-badge--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-badge--${props.size}`]: props.size && props.size != 's',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/badge';\n</style>\n","<template>\n  <div class=\"mc-loader\" :class=\"classObject\">\n    <span class=\"mc-loader__spinner\">\n      <svg\n        class=\"mc-loader__icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        :viewBox=\"setViewBox\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          class=\"mc-loader__path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          :r=\"setCircleRadius\"\n        ></circle>\n      </svg>\n    </span>\n    <p v-if=\"text\" class=\"mc-loader__text\" role=\"status\">{{ text }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-loader--${props.size}`]: props.size && props.size !== 'm',\n    [`mc-loader--${props.appearance}`]:\n      props.appearance && props.appearance !== 'standard',\n  };\n});\n\nconst setViewBox = computed(() => {\n  let viewBox: string;\n\n  switch (props.size) {\n    case 's':\n      viewBox = '0 0 24 24';\n      break;\n    case 'l':\n      viewBox = '0 0 64 64';\n      break;\n    default:\n      viewBox = '0 0 32 32';\n  }\n  return viewBox;\n});\n\nconst setCircleRadius = computed(() => {\n  let circleRadius: number;\n\n  switch (props.size) {\n    case 's':\n      circleRadius = 6;\n      break;\n    case 'l':\n      circleRadius = 19;\n      break;\n    default:\n      circleRadius = 9;\n  }\n\n  return circleRadius;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/loader';\n</style>\n","<template>\n  <button\n    class=\"mc-button\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n  >\n    <span\n      v-if=\"$slots.icon && iconPosition == 'left' && !isLoading\"\n      class=\"mc-button__icon\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-if=\"isLoading\"\n      class=\"mc-button__icon\"\n      :style=\"{ position: 'absolute' }\"\n    >\n      <MLoader :style=\"{ color: 'currentColor' }\" size=\"s\" />\n    </span>\n    <span v-if=\"$slots.icon && iconPosition == 'only'\" class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n    <span\n      v-else\n      class=\"mc-button__label\"\n      :style=\"{ visibility: isLoading ? 'hidden' : 'visible' }\"\n    >\n      <slot>Button Label</slot>\n    </span>\n    <span\n      v-if=\"$slots.icon && iconPosition == 'right' && !isLoading\"\n      class=\"mc-button__icon\"\n    >\n      <slot name=\"icon\" />\n    </span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\nimport MLoader from '../loader/MLoader.vue';\n/**\n * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconPosition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isLoading?: boolean;\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n    type: 'button',\n  },\n);\n\ndefineSlots<{\n  /**\n   * The content displayed in the button.\n   */\n  default: string;\n  /**\n   * Use this slot to insert an icon for the Button\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-button--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-button--${props.size}`]: props.size && props.size != 'm',\n    'mc-button--ghost': props.ghost,\n    'mc-button--outlined': props.outlined,\n    'mc-button--icon-only': props.iconPosition == 'only',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template>\n  <div class=\"mc-checkbox\">\n    <input\n      :id=\"id\"\n      type=\"checkbox\"\n      class=\"mc-checkbox__input\"\n      :class=\"classObject\"\n      :name=\"name\"\n      :checked=\"modelValue\"\n      :indeterminate=\"indeterminate\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      v-bind=\"$attrs\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    <label v-if=\"label\" :for=\"id\" class=\"mc-checkbox__label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the checkbox, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The name attribute for the checkbox element, typically used for form submission.\n   */\n  name?: string;\n  /**\n   * The text label displayed next to the checkbox.\n   */\n  label?: string;\n  /**\n   * The checkbox's checked state, bound via v-model.\n   */\n  modelValue?: boolean;\n  /**\n   * Sets the checkbox to an indeterminate state (partially selected).\n   */\n  indeterminate?: boolean;\n  /**\n   * If `true`, applies an invalid state to the checkbox.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, disables the checkbox, making it non-interactive.\n   */\n  disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the checkbox value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/checkbox';\n</style>\n","<template>\n  <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n    <MCheckbox\n      v-for=\"option in options\"\n      :id=\"option.id\"\n      :key=\"option.id\"\n      :label=\"option.label\"\n      :is-invalid=\"option.isInvalid\"\n      :name=\"name\"\n      class=\"mc-field__item\"\n      :class=\"classObjectItem\"\n      :model-value=\"modelValue ? modelValue.includes(option.value) : undefined\"\n      :disabled=\"option.disabled\"\n      @update:model-value=\"(v: boolean) => onChange(v, option.value)\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport MCheckbox from '../checkbox/MCheckbox.vue';\n\n/**\n * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.\n */\nconst props = defineProps<{\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name: string;\n  /**\n   * Property used to manage the values checked by v-model\n   * (Do not use directly)\n   */\n  modelValue?: Array<string>;\n  /**\n   * list of properties of each radio button of the radio group\n   */\n  options: Array<{\n    id: string;\n    label: string;\n    value: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n  }>;\n  /**\n   * If `true`, make the form element of the group inline.\n   */\n  inline?: boolean;\n}>();\n\nconst selectedValue = ref<string[]>([]);\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    selectedValue.value = newValue || [];\n  },\n  { immediate: true },\n);\n\nconst onChange = (isChecked: boolean, value: string) => {\n  let values = [...selectedValue.value];\n\n  if (isChecked && !values.includes(value)) {\n    values.push(value);\n  } else {\n    values = values.filter((val) => val !== value);\n  }\n\n  emit('update:modelValue', values);\n  selectedValue.value = values;\n};\n\nconst classObjectContainer = computed(() => {\n  return {\n    'mc-field__container--inline': props.inline,\n  };\n});\n\nconst classObjectItem = computed(() => {\n  return {\n    'mc-field__container--inline__item': props.inline,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the checkbox group value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: Array<string>): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <div class=\"mc-field\">\n    <label class=\"mc-field__label\" :for=\"id\">\n      {{ label }}\n      <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n        >({{ requirementText }})</span\n      >\n    </label>\n\n    <span v-if=\"helpId && helpText\" :id=\"helpId\" class=\"mc-field__help\">{{\n      helpText\n    }}</span>\n\n    <div class=\"mc-field__content\">\n      <slot />\n    </div>\n\n    <span\n      v-if=\"(isValid || isInvalid) && message\"\n      class=\"mc-field__validation-message\"\n      :id=\"messageId\"\n      :class=\"classObjectValidation\"\n    >\n      {{ message }}\n    </span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the form field, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The text displayed as the label for the form field.\n   */\n  label: string;\n  /**\n   * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n   */\n  requirementText?: string;\n  /**\n   * Text shown below the form field to provide additional context or instructions for the user.\n   */\n  helpText?: string;\n  /**\n   * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n   */\n  helpId?: string;\n  /**\n   * If `true`, applies a valid state to the form field.\n   */\n  isValid?: boolean;\n  /**\n   * If `true`, applies an invalid state to the form field.\n   */\n  isInvalid?: boolean;\n  /**\n   * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n   */\n  messageId?: string;\n  /**\n   * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n   */\n  message?: string;\n}>();\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n  return {\n    'is-valid': props.isValid,\n    'is-invalid': props.isInvalid,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <fieldset class=\"mc-field--group\">\n    <legend class=\"mc-field__legend\" :for=\"id\">\n      {{ legend }}\n      <span v-if=\"requirementText\" class=\"mc-field__requirement\"\n        >({{ requirementText }})</span\n      >\n    </legend>\n\n    <span v-if=\"helpText\" class=\"mc-field__help\">{{ helpText }}</span>\n\n    <div class=\"mc-field__content\">\n      <slot />\n    </div>\n\n    <span\n      v-if=\"(isValid || isInvalid) && message\"\n      class=\"mc-field__validation-message\"\n      :class=\"classObjectValidation\"\n    >\n      {{ message }}\n    </span>\n  </fieldset>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the form field, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The text displayed as the legend for the form fieldset.\n   */\n  legend: string;\n  /**\n   * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n   */\n  requirementText?: string;\n  /**\n   * Text shown below the form field to provide additional context or instructions for the user.\n   */\n  helpText?: string;\n  /**\n   * If `true`, applies a valid state to the form field.\n   */\n  isValid?: boolean;\n  /**\n   * If `true`, applies an invalid state to the form field.\n   */\n  isInvalid?: boolean;\n  /**\n   * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n   */\n  message?: string;\n}>();\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  default: VNode;\n}>();\n\nconst classObjectValidation = computed(() => {\n  return {\n    'is-valid': props.isValid,\n    'is-invalid': props.isInvalid,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <button\n    class=\"mc-button mc-button--icon-button\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    :type=\"type\"\n  >\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Defines the visual style of the icon button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the icon button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the icon button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the icon button.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the icon button gets an outlined style.\n     */\n    outlined?: boolean;\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n  }>(),\n  {\n    appearance: 'standard',\n    size: 'm',\n    type: 'button',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the form element of your choice\n   */\n  icon: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-button--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-button--${props.size}`]: props.size && props.size != 'm',\n    'mc-button--ghost': props.ghost,\n    'mc-button--outlined': props.outlined,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/button';\n</style>\n","<template>\n  <component\n    :is=\"router ? 'router-link' : 'a'\"\n    class=\"mc-link\"\n    :class=\"classObject\"\n    :href=\"href\"\n    :target=\"target\"\n    :to=\"router ? href : undefined\"\n  >\n    <span\n      v-if=\"$slots.icon && iconPosition == 'left'\"\n      class=\"mc-link__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n    <span class=\"mc-link__label\">\n      <slot />\n    </span>\n    <span\n      v-if=\"$slots.icon && iconPosition == 'right'\"\n      class=\"mc-link__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </span>\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\n/**\n * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconPosition?: 'left' | 'right';\n    /**\n     * Allows to define the link style\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size\n     */\n    size?: 's' | 'm';\n    /**\n     * URL for the link (for external links or the `to` prop for `router-link`).\n     */\n    href?: string;\n    /**\n     * Where to open the link\n     */\n    target?: string;\n    /**\n     * Specify wether the link is inline\n     */\n    inline?: boolean;\n    /**\n     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).\n     */\n    router?: boolean;\n  }>(),\n  {\n    href: undefined,\n    target: undefined,\n    appearance: 'standard',\n    size: 's',\n    iconPosition: 'left',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert the textual content of the Link\n   */\n  default: string;\n  /**\n   * Use this slot to insert an icon for the Link\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-link--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-link--${props.size}`]: props.size && props.size != 's',\n    'mc-link--inline': props.inline,\n    'mc-link--stand-alone': !props.inline,\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/link';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'More24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'Less24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template>\n  <div class=\"mc-quantity-selector\" :class=\"classObject\">\n    <input\n      :id=\"id\"\n      v-model=\"currentValue\"\n      class=\"mc-quantity-selector__control\"\n      type=\"number\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :readonly=\"readonly\"\n      :aria-invalid=\"isInvalid\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuenow=\"currentValue\"\n      v-bind=\"$attrs\"\n      @change=\"onChange(Number(($event.target as HTMLInputElement).value))\"\n    />\n    <button\n      v-if=\"!readonly\"\n      type=\"button\"\n      :aria-controls=\"id\"\n      class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n      tabindex=\"-1\"\n      :disabled=\"disabled || currentValue === max\"\n      @click=\"increment\"\n    >\n      <span class=\"mc-quantity-selector__icon\">\n        <More24 />\n      </span>\n      <span class=\"mc-quantity-selector__label\">{{ incrementlabel }}</span>\n    </button>\n    <button\n      v-if=\"!readonly\"\n      type=\"button\"\n      :aria-controls=\"id\"\n      class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n      tabindex=\"-1\"\n      :disabled=\"disabled || currentValue === min\"\n      @click=\"decrement\"\n    >\n      <span class=\"mc-quantity-selector__icon\">\n        <Less24 />\n      </span>\n      <span class=\"mc-quantity-selector__label\">{{ decrementLabel }}</span>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';\nimport Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';\n\n/**\n * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the quantity selector element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the quantity selector element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the quantity selector field.\n     */\n    modelValue?: number;\n    /**\n     * If `true`, applies an invalid state to the quantity selector.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, disables the quantity selector, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the quantity selector\n     */\n    size?: 's' | 'm';\n    /**\n     * Minimum acceptable value for the quantity selector.\n     */\n    min?: number;\n    /**\n     * Maximum acceptable value for the quantity selector.\n     */\n    max?: number;\n    /**\n     * Determines how much the value will change per click when the quantity is increased or decreased.\n     */\n    step?: number;\n    /**\n     * If `true`, the quantity selector is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * The label text for the increment button.\n     */\n    incrementlabel?: string;\n    /**\n     * The label text for the decrement button.\n     */\n    decrementLabel?: string;\n  }>(),\n  {\n    modelValue: 1,\n    min: 1,\n    max: 100,\n    step: 1,\n    size: 'm',\n    name: 'quantity-selector-input',\n    incrementlabel: 'Increment',\n    decrementLabel: 'Decrement',\n  },\n);\n\nconst currentValue = ref(props.modelValue);\n\nwatch(currentValue, (newVal) => {\n  if (newVal !== props.modelValue) {\n    emit('update:modelValue', newVal);\n  }\n});\n\nconst classObject = computed(() => {\n  return {\n    [`mc-quantity-selector--${props.size}`]: props.size && props.size != 'm',\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst increment = () => {\n  if (currentValue.value + props.step <= props.max) {\n    currentValue.value += props.step;\n  } else {\n    currentValue.value = props.max;\n  }\n};\n\nconst decrement = () => {\n  if (currentValue.value - props.step > props.min) {\n    currentValue.value -= props.step;\n  } else {\n    currentValue.value = props.min;\n  }\n};\n\nconst onChange = (value: number) => {\n  currentValue.value = value;\n\n  if (currentValue.value > props.max) {\n    currentValue.value = props.max;\n  }\n  if (currentValue.value <= props.min) {\n    currentValue.value = props.min;\n  }\n\n  emit('update:modelValue', currentValue.value);\n};\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the quantity selector value changes, updating the `modelValue` prop.\n   */\n  (on: 'update:modelValue', value: number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n","<template>\n  <div class=\"mc-radio\">\n    <input\n      :id=\"id\"\n      type=\"radio\"\n      class=\"mc-radio__input\"\n      :class=\"classObject\"\n      :name=\"name\"\n      :checked=\"modelValue\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      v-bind=\"$attrs\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    <label v-if=\"label\" :for=\"id\" class=\"mc-radio__label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n  /**\n   * A unique identifier for the radio, used to associate the label with the form element.\n   */\n  id: string;\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name?: string;\n  /**\n   * The text label displayed next to the radio.\n   */\n  label?: string;\n  /**\n   * The radio's checked state, bound via v-model.\n   */\n  modelValue?: boolean;\n  /**\n   * If `true`, applies an invalid state to the radio.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, disables the radio, making it non-interactive.\n   */\n  disabled?: boolean;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the radio value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/radio';\n</style>\n","<template>\n  <div class=\"mc-field__container\" :class=\"classObjectContainer\">\n    <MRadio\n      v-for=\"option in options\"\n      :id=\"option.id\"\n      :key=\"option.id\"\n      :label=\"option.label\"\n      :is-invalid=\"isInvalid\"\n      :name=\"name\"\n      class=\"mc-field__item\"\n      :class=\"classObjectItem\"\n      :model-value=\"modelValue === option.value\"\n      :disabled=\"option.disabled\"\n      @update:model-value=\"\n        (v: boolean) => (v ? emit('update:modelValue', option.value) : null)\n      \"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MRadio from '../radio/MRadio.vue';\n\n/**\n * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.\n */\nconst props = defineProps<{\n  /**\n   * The name attribute for the radio element, typically used for form submission.\n   */\n  name: string;\n  /**\n   * Property used to manage the values checked by v-model\n   * (Do not use directly)\n   */\n  modelValue?: string;\n  /**\n   * list of properties of each radio button of the radio group\n   */\n  options: Array<{\n    id: string;\n    label: string;\n    value: string;\n    disabled?: boolean;\n  }>;\n  /**\n   * If `true`, applies an invalid state to the radio group.\n   */\n  isInvalid?: boolean;\n  /**\n   * If `true`, make the form element of the group inline.\n   */\n  inline?: boolean;\n}>();\n\nconst classObjectContainer = computed(() => {\n  return {\n    'mc-field__container--inline': props.inline,\n  };\n});\n\nconst classObjectItem = computed(() => {\n  return {\n    'mc-field__container--inline__item': props.inline,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the radio group value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/field';\n</style>\n","<template>\n  <select\n    :id=\"id\"\n    class=\"mc-select\"\n    :name=\"name\"\n    :value=\"modelValue\"\n    :class=\"classObject\"\n    :disabled=\"disabled\"\n    v-bind=\"$attrs\"\n    @change=\"\n      emit('update:modelValue', ($event.target as HTMLSelectElement).value)\n    \"\n  >\n    <option v-if=\"placeholder\" value=\"\" disabled>\n      -- {{ placeholder }} --\n    </option>\n    <option\n      v-for=\"(option, index) in options\"\n      :key=\"index\"\n      :value=\"option.value\"\n      v-bind=\"option.attributes\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.text }}\n    </option>\n  </select>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      attributes?: Record<string, string | boolean | number>;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    modelValue?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }>(),\n  {\n    size: 'm',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-select--${props.size}`]: props.size && props.size != 'm',\n    'mc-select--readonly': props.readonly,\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the select value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/select';\n</style>\n","<template>\n  <span class=\"mc-status-dot\" :class=\"classObject\"></span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n/**\n * A badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Allows to define the Status Dot style\n     */\n    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n  }>(),\n  {\n    appearance: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-dot--${props.appearance}`]:\n      props.appearance && props.appearance != 'info',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-dot';\n</style>\n","<template>\n  <div class=\"mc-status-badge\" :class=\"classObject\">\n    <MStatusDot :appearance=\"appearance\" />\n    <span class=\"mc-status-badge__label\">{{ label }}</span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MStatusDot from './MStatusDot.vue';\n/**\n * A status badge indicates the status of an entity and can evolve at any time.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Content of the Status Badge\n     */\n    label: string;\n    /**\n     * Allows to define the Status Badge style\n     */\n    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n  }>(),\n  {\n    appearance: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-badge--${props.appearance}`]:\n      props.appearance && props.appearance != 'info',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-badge';\n</style>\n","<template>\n  <textarea\n    :id=\"id\"\n    class=\"mc-textarea\"\n    :class=\"classObject\"\n    :aria-invalid=\"isInvalid\"\n    :value=\"modelValue\"\n    :name=\"name\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :minlength=\"minLength\"\n    :maxlength=\"maxLength\"\n    :rows=\"rows\"\n    :readonly=\"readonly\"\n    v-bind=\"$attrs\"\n    @input=\"\n      emit('update:modelValue', ($event.target as HTMLInputElement).value)\n    \"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    modelValue?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minLength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxLength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }>(),\n  {\n    rows: 2,\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the textarea value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/textarea';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'CrossCircleFilled24',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template>\n  <div class=\"mc-text-input\" :class=\"classObject\">\n    <span v-if=\"$slots.icon\" class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n\n    <input\n      :id=\"id\"\n      class=\"mc-text-input__control\"\n      :value=\"modelValue\"\n      :type=\"inputType\"\n      :name=\"name\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"isInvalid\"\n      :readonly=\"readonly\"\n      v-bind=\"$attrs\"\n      @input=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).value)\n      \"\n    />\n\n    <div v-if=\"isClearable && modelValue\" class=\"mc-controls-options\">\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        @click=\"clearValue\"\n      >\n        <CrossCircleFilled24\n          class=\"mc-controls-options__icon\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mc-controls-options__label\">{clearLabel}</span>\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, type VNode } from 'vue';\nimport CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';\n\n/**\n * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    modelValue?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input\n     */\n    inputType?:\n      | 'date'\n      | 'email'\n      | 'number'\n      | 'password'\n      | 'search'\n      | 'tel'\n      | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isClearable?: boolean;\n    /**\n     * The label text for the clear button\n     */\n    clearLabel?: string;\n  }>(),\n  {\n    inputType: 'text',\n    size: 'm',\n    clearLabel: 'clear content',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert an icon in the input\n   */\n  icon?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-text-input--${props.size}`]: props.size && props.size != 'm',\n    'is-invalid': props.isInvalid,\n  };\n});\n\nconst modelValue = ref(props.modelValue);\nconst clearValue = () => {\n  modelValue.value = '';\n  emit('update:modelValue', '');\n};\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the input value changes, updating the `modelValue` prop.\n   */\n  (on: 'update:modelValue', value: string | number): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/controls-options';\n@use '@mozaic-ds/styles/components/text-input';\n</style>\n","<template>\n  <div class=\"mc-toggle\" :class=\"classObject\">\n    <label class=\"mc-toggle__container\" :for=\"id\">\n      <input\n        :id=\"id\"\n        type=\"checkbox\"\n        class=\"mc-toggle__input\"\n        :name=\"name\"\n        :checked=\"modelValue\"\n        :disabled=\"disabled\"\n        v-bind=\"$attrs\"\n        @change=\"\n          emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n        \"\n      />\n      <span v-if=\"label\" :for=\"id\" class=\"mc-toggle__label\">\n        {{ label }}\n      </span>\n    </label>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\n/**\n * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and \"on/off\" switch.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the toggle, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the toggle element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the toggle.\n     */\n    label?: string;\n    /**\n     * The toggle's checked state, bound via v-model.\n     */\n    modelValue?: boolean;\n    /**\n     * Determines the size of the toggle\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, disables the toggle, making it non-interactive.\n     */\n    disabled?: boolean;\n  }>(),\n  {\n    size: 's',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-toggle--${props.size}`]: props.size && props.size != 's',\n  };\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when the toggle value changes, updating the modelValue prop.\n   */\n  (on: 'update:modelValue', value: boolean): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["props","__props","classObject","computed","setViewBox","viewBox","setCircleRadius","circleRadius","emit","__emit","selectedValue","ref","watch","newValue","onChange","isChecked","value","values","val","classObjectContainer","classObjectItem","classObjectValidation","_sfc_main$b","_hoisted_1","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_createElementVNode","_sfc_main$a","currentValue","newVal","increment","decrement","_sfc_main$2","modelValue","clearValue"],"mappings":"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","x_google_ignoreList":[9,10,18]}

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,73 +1,103 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-beta.3",
-  "description": "Vue.js implementation of Mozaic Design System",
-  "author": "Adeo - Mozaic Design System",
+  "version": "1.0.0-beta.4",
+  "type": "module",
+  "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
+  "author": "ADEO - ADEO Design system",
+  "main": "./dist/mozaic-vue.umd.cjs",
+  "module": "./dist/mozaic-vue.js",
+  "types": "./dist/mozaic-vue.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mozaic-vue.js",
+      "require": "./dist/mozaic-vue.umd.cjs"
+    },
+    "./style.css": "./dist/mozaic-vue.css"
+  },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build ./src/index.js",
-    "lint": "vue-cli-service lint",
-    "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
-    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
-    "postinstall": "node postinstall.js",
-    "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
-    "publish:beta": "npm publish --access public --tag alpha",
-    "tokens:build": "mozaic-tokens-build"
+    "start": "npm-run-all --parallel dev storybook",
+    "dev": "vite --mode development",
+    "lint": "eslint . --fix",
+    "test:unit": "vitest",
+    "format": "prettier --write src/",
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run build-storybook",
+    "storybook:deploy": "storybook-to-ghpages",
+    "prepare": "node .husky/install.mjs",
+    "build-storybook": "storybook build",
+    "release": "release-it",
+    "release:beta": "release-it --preRelease=beta",
+    "prepublishOnly": "npm run build",
+    "npm:publish": "npm publish --access public",
+    "npm:publish:beta": "npm publish --access public --tag beta"
   },
-  "main": "./dist/mozaic-vue.umd.min.js",
   "files": [
     "dist/*",
     "src/*",
     "types/*",
-    "*.d.ts",
-    "postinstall.js"
+    "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "2.0.0-rc.1",
-    "@mozaic-ds/icons": "1.34.0",
-    "@mozaic-ds/styles": "2.0.0-rc.4",
-    "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.18.3",
-    "libphonenumber-js": "1.9.50",
-    "postcss-scss": "^4.0.1",
-    "vue": "^2.6.14",
-    "vue-country-flag": "2.3.2"
+    "@mozaic-ds/styles": "2.0.0-alpha.0",
+    "@mozaic-ds/web-fonts": "1.65.0",
+    "postcss-scss": "^4.0.9",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
-    "@vue/cli-plugin-babel": "~5.0.4",
-    "@vue/cli-service": "~5.0.4",
-    "@vue/compiler-sfc": "^3.2.20",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "postcss": "^8.3.9",
-    "postcss-loader": "^4.3.0",
-    "prettier": "^2.4.1",
-    "sass": "^1.42.1",
-    "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.6.14"
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@mozaic-ds/css-dev-tools": "1.75.0",
+    "@mozaic-ds/icons-vue": "^0.0.1-beta.0",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-themes": "^8.6.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/vue3": "^8.4.6",
+    "@storybook/vue3-vite": "^8.6.7",
+    "@types/jsdom": "^21.1.7",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/eslint-plugin": "^1.1.38",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "all-contributors-cli": "^6.26.1",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.5.0",
+    "mdx-mermaid": "^2.0.3",
+    "mermaid": "^11.5.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.5.3",
+    "release-it": "^18.1.2",
+    "sass": "^1.86.0",
+    "storybook": "^8.6.7",
+    "typescript": "^5.7.2",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.9",
+    "vue-eslint-parser": "^10.1.1"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"
   },
   "homepage": "https://github.com/adeo/mozaic-vue#readme",
   "keywords": [
-    "design system",
-    "mozaic design system",
-    "vue.js",
-    "html",
-    "sass",
-    "scss",
-    "adeo"
+    "Adeo",
+    "Adeo Design system",
+    "Design System",
+    "Vue",
+    "Mozaic"
   ],
-  "license": "ISC",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/adeo/mozaic-vue.git"
-  },
-  "types": "./types/index.d.ts"
+  }
 }