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

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

@@ -1 +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]}
+{"version":3,"file":"mozaic-vue.umd.cjs","sources":["../src/components/link/MLink.vue","../src/components/breadcrumb/MBreadcrumb.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/numberbadge/MNumberBadge.vue","../src/components/overlay/MOverlay.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue","../src/components/passwordinput/MPasswordInput.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/statusdot/MStatusDot.vue","../src/components/statusbadge/MStatusBadge.vue","../node_modules/@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue","../node_modules/@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue","../node_modules/@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue","../src/components/statusnotification/MStatusNotification.vue","../src/components/textarea/MTextArea.vue","../src/components/textinput/MTextInput.vue","../src/components/toggle/MToggle.vue","../src/components/togglegroup/MToggleGroup.vue"],"sourcesContent":["<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?: '_self' | '_blank' | '_parent' | '_top';\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>\n  <nav class=\"mc-breadcrumb\" :class=\"classObject\" aria-label=\"Breadcrumb\">\n    <ul class=\"mc-breadcrumb__container\">\n      <li\n        class=\"mc-breadcrumb__item\"\n        v-for=\"(link, index) in links\"\n        :key=\"`breadcrumb-${index}`\"\n      >\n        <MLink\n          :href=\"link.href\"\n          :router=\"link.router\"\n          :appearance=\"appearance\"\n          inline\n          :class=\"{\n            'mc-breadcrumb__current': isLastLink(index),\n          }\"\n          :aria-current=\"isLastLink(index) ? 'page' : undefined\"\n        >\n          {{ link.label }}\n        </MLink>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport MLink from '../link/MLink.vue';\n/**\n * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n */\nconst props = defineProps<{\n  /**\n   * Allows to define the breadcrumb style\n   */\n  appearance?: 'standard' | 'inverse';\n  /**\n   * Links of the breadcrumb\n   */\n  links?: Array<{\n    /**\n     * The label displayed for the link.\n     */\n    label: string;\n    /**\n     * URL for the link (for external links or the `to` prop for `router-link`).\n     */\n    href: string;\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\nconst classObject = computed(() => {\n  return {\n    [`mc-breadcrumb--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n  };\n});\n\nconst isLastLink = (index: number) => {\n  return index === (props.links?.length ?? 0) - 1;\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/breadcrumb';\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 checkbox 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 checkbox button of the checkbox 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  <span class=\"mc-number-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-number-badge--${props.appearance}`]:\n      props.appearance && props.appearance != 'standard',\n    [`mc-number-badge--${props.size}`]: props.size && props.size != 's',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/number-badge';\n</style>\n","<template>\n  <div class=\"mc-overlay\" :class=\"{ 'is-visible': isVisible }\">\n    <div role=\"dialog\" tabindex=\"-1\" :aria-labelledby=\"dialogLabel\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\n\n/**\n * An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.\n */\ndefineProps<{\n  /**\n   * Controls the visibility of the overlay.\n   */\n  isVisible?: boolean;\n  /**\n   * Accessible label for the overlay dialog.\n   */\n  dialogLabel?: string;\n}>();\n\ndefineSlots<{\n  /**\n   * Use this slot to insert a centered content inside the overlay\n   */\n  default?: VNode;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/overlay';\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-password-input mc-text-input\" :class=\"classObject\">\n    <input\n      class=\"mc-password-input__control mc-text-input__control\"\n      v-model=\"modelValue\"\n      :id=\"id\"\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    <div v-if=\"isClearable && modelValue\" class=\"mc-controls-options\">\n      <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    <MButton\n      ref=\"button\"\n      role=\"switch\"\n      :aria-checked=\"ariaChecked\"\n      :disabled=\"disabled\"\n      @click=\"toggleVisibility\"\n      size=\"s\" \n      ghost\n    >\n      {{ isVisible ? buttonLabel.hide : buttonLabel.show }}\n    </MButton>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';\nimport MButton from '../button/MButton.vue';\n\n/**\n * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    modelValue?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isInvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isClearable?: boolean;\n    /**\n     * The label text for the clear button\n     */\n    clearLabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password\n     */\n    buttonLabel?: {\n      show: string;\n      hide: string;\n    };\n  }>(),\n  {\n    clearLabel: 'Clear content',\n    buttonLabel: () => ({ show: 'Show', hide: 'Hide' }),\n  },\n);\n\nconst classObject = computed(() => ({\n  'is-invalid': props.isInvalid,\n}));\n\n// Local state management\nconst modelValue = ref(props.modelValue);\nconst isVisible = ref(false);\n\n/**\n * Clear the input value.\n */\nconst clearValue = () => {\n  modelValue.value = '';\n  emit('update:modelValue', '');\n};\n\n/**\n * Toggle the visibility of the password.\n */\nconst toggleVisibility = () => {\n  isVisible.value = !isVisible.value;\n};\n\n/**\n * Compute the input type based on visibility state.\n */\nconst inputType = computed(() => (isVisible.value ? 'text' : 'password'));\n\n/**\n * Aria attributes for accessibility.\n */\nconst ariaChecked = computed(() => (isVisible.value ? 'true' : 'false'));\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@use '@mozaic-ds/styles/components/password-input';\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    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the Status Dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }>(),\n  {\n    status: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-dot--${props.status}`]: props.status && props.status != 'info',\n    [`mc-status-dot--${props.size}`]: props.size && props.size != 'm',\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 :status=\"status\" />\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 '../statusdot/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    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n  }>(),\n  {\n    status: 'info',\n  },\n);\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-badge--${props.status}`]:\n      props.status && props.status != 'info',\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-badge';\n</style>\n","<template><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M16.364 4.697a.75.75 0 1 0-1.061-1.06L10 8.938 4.697 3.636a.75.75 0 0 0-1.06 1.06L8.938 10l-5.303 5.303a.75.75 0 0 0 1.061 1.06L10 11.06l5.303 5.303a.75.75 0 0 0 1.06-1.06L11.062 10l5.303-5.303Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"20\" height=\"20\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'Cross20',\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 32 32\">\n  <path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1ZM16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'InfoCircle32',\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 32 32\">\n  <path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1Zm0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'WarningCircle32',\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 32 32\">\n  <path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586l-3.293-3.293Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'CrossCircle32',\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 32 32\">\n  <path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l7.333-7.333Z\"/>\n</svg>\n</template>\n<script lang=\"ts\">\nexport default {\n    name: 'CheckCircle32',\n    props: {\n    /**\n     * Icon color\n     */\n    color: {\n      type: String,\n      default: 'currentColor',\n    },\n  },\n};\n</script>\n","<template>\n  <section class=\"mc-status-notification\" role=\"status\" :class=\"classObject\">\n    <component\n      :is=\"iconComponent\"\n      class=\"mc-status-notification__icon\"\n      aria-hidden=\"true\"\n    />\n    <div class=\"mc-status-notification__content\">\n      <h2 class=\"mc-status-notification__title\">{{ title }}</h2>\n\n      <p class=\"mc-status-notification__message\">\n        {{ description }}\n      </p>\n\n      <div v-if=\"$slots.footer\" class=\"mc-status-notification__footer\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n\n    <button\n      v-if=\"closable\"\n      class=\"mc-status-notification-closable__close\"\n      @click=\"emit('close')\"\n    >\n      <Cross20\n        class=\"mc-status-notification-closable__icon\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"mc-status-notification-closable__text\">Close</span>\n    </button>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, type VNode } from 'vue';\nimport Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';\nimport InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';\nimport WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';\nimport CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';\nimport CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';\n/**\n * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Title of the Status Notification\n     */\n    title: string;\n    /**\n     * Description of the Status Notification\n     */\n    description: string;\n    /**\n     * Allows to define the Status Notification style\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }>(),\n  {\n    status: 'info',\n  },\n);\n\ndefineSlots<{\n  /**\n   * Use this slot to insert a button or a link in the footer\n   */\n  footer?: VNode;\n}>();\n\nconst classObject = computed(() => {\n  return {\n    [`mc-status-notification--${props.status}`]:\n      props.status && props.status != 'info',\n  };\n});\n\nconst iconComponent = computed(() => {\n  switch (props.status) {\n    case 'success':\n      return CheckCircle32;\n    case 'warning':\n      return WarningCircle32;\n    case 'error':\n      return CrossCircle32;\n    case 'info':\n    default:\n      return InfoCircle32;\n  }\n});\n\nconst emit = defineEmits<{\n  /**\n   * Emits when closing the notification.\n   */\n  (on: 'close'): void;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@mozaic-ds/styles/components/status-notification';\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>\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","<template>\n  <div :class=\"classObjectContainer\">\n    <MToggle\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=\"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 MToggle from '../toggle/MToggle.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 = defineProps<{\n  /**\n   * The name attribute for the toggle 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 toggle of the toggle group\n   */\n  options: Array<{\n    id: string;\n    label: string;\n    value: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n    size?: 's' | 'm';\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 toggle 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"],"names":["props","__props","classObject","computed","_openBlock","_createBlock","_resolveDynamicComponent","router","_normalizeClass","href","target","$slots","iconPosition","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","isLastLink","index","_a","_Fragment","links","link","_createVNode","MLink","appearance","_createTextVNode","_toDisplayString","setViewBox","viewBox","setCircleRadius","circleRadius","text","_hoisted_4","disabled","type","isLoading","MLoader","_hoisted_5","emit","__emit","_mergeProps","id","name","modelValue","indeterminate","isInvalid","$attrs","_cache","$event","label","selectedValue","ref","watch","newValue","onChange","isChecked","value","values","val","classObjectContainer","classObjectItem","_renderList","options","option","MCheckbox","v","classObjectValidation","requirementText","helpId","helpText","isValid","message","messageId","_hoisted_6","legend","isVisible","dialogLabel","_sfc_main$j","clearValue","toggleVisibility","inputType","ariaChecked","_withDirectives","placeholder","readonly","isClearable","CrossCircleFilled24","clearLabel","MButton","buttonLabel","_sfc_main$h","_sfc_main$g","currentValue","newVal","increment","decrement","min","max","step","More24","incrementlabel","Less24","_hoisted_7","decrementLabel","MRadio","MStatusDot","status","_sfc_main$9","_sfc_main$8","_sfc_main$7","_sfc_main$6","_sfc_main$5","iconComponent","CheckCircle32","WarningCircle32","CrossCircle32","InfoCircle32","title","description","closable","Cross20","minLength","maxLength","rows","MToggle"],"mappings":"ymBAkCA,MAAMA,EAAQC,EAmDRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,YAAYH,EAAM,UAAU,EAAE,EAC7BA,EAAM,YAAcA,EAAM,YAAc,WAC1C,CAAC,YAAYA,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IACxD,kBAAmBA,EAAM,OACzB,uBAAwB,CAACA,EAAM,MACjC,EACD,gBA5FCI,EAAA,UAAA,EAAAC,EAAAA,YAyBYC,EAAA,wBAxBLC,EAAM,OAAA,cAAA,GAAA,EAAA,CACX,MAAKC,EAAAA,eAAA,CAAC,UACEN,EAAW,KAAA,CAAA,EAClB,KAAMO,EAAI,KACV,OAAQC,EAAM,OACd,GAAIH,EAAAA,OAASE,EAAAA,KAAO,MAAA,qBAErB,IAMO,CALCE,EAAM,OAAC,MAAQC,EAAY,cAAA,QADnCR,EAAAA,YAAAS,EAAAA,mBAMO,OANPC,EAMO,CADLC,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gCAEtBC,EAAA,mBAEO,OAFPC,EAEO,CADLH,aAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGFL,EAAM,OAAC,MAAQC,EAAY,cAAA,SADnCR,EAAAA,YAAAS,EAAAA,mBAMO,OANPM,EAMO,CADLJ,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,oTCO1B,MAAMhB,EAAQC,EAwBRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,kBAAkBH,EAAM,UAAU,EAAE,EACnCA,EAAM,YAAcA,EAAM,YAAc,UAC5C,EACD,EAEKoB,EAAcC,GAAkB,OACpC,OAAOA,OAAWC,EAAAtB,EAAM,QAAN,YAAAsB,EAAa,SAAU,GAAK,CAChD,8BA/DET,EAAA,mBAqBM,MAAA,CArBD,MAAKL,EAAAA,eAAA,CAAC,gBAAwBN,EAAW,KAAA,CAAA,EAAE,aAAW,YAAA,GACzDe,EAAA,mBAmBK,KAnBLH,EAmBK,EAlBHV,EAAAA,UAAA,EAAA,EAAAS,EAiBK,mBAAAU,WAfqBC,KAAAA,EAAAA,WAAAA,EAAAA,MAAhB,CAAAC,EAAMJ,mBAFhBR,EAAA,mBAiBK,KAAA,CAhBH,MAAM,sBAEL,kBAAmBQ,CAAK,EAAA,GAEzBK,EAAAA,YAWQC,EAAA,CAVL,KAAMF,EAAK,KACX,OAAQA,EAAK,OACb,WAAYG,EAAU,WACvB,OAAA,GACC,MAAKpB,EAAAA,eAAA,CAA0C,yBAAAY,EAAWC,CAAK,CAAA,GAG/D,eAAcD,EAAWC,CAAK,SAAa,MAAA,qBAE5C,IAAgB,CAAbQ,EAAAA,gBAAAC,EAAA,gBAAAL,EAAK,KAAK,EAAA,CAAA,CAAA,oVCQvB,MAAMzB,EAAQC,EAuBRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,cAAcH,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,OAAS,IAC3D,CAAC,cAAcA,EAAM,UAAU,EAAE,EAC/BA,EAAM,YAAcA,EAAM,aAAe,UAC7C,EACD,EAEK+B,EAAa5B,EAAAA,SAAS,IAAM,CAC5B,IAAA6B,EAEJ,OAAQhC,EAAM,KAAM,CAClB,IAAK,IACOgC,EAAA,YACV,MACF,IAAK,IACOA,EAAA,YACV,MACF,QACYA,EAAA,WAAA,CAEP,OAAAA,CAAA,CACR,EAEKC,EAAkB9B,EAAAA,SAAS,IAAM,CACjC,IAAA+B,EAEJ,OAAQlC,EAAM,KAAM,CAClB,IAAK,IACYkC,EAAA,EACf,MACF,IAAK,IACYA,EAAA,GACf,MACF,QACiBA,EAAA,CAAA,CAGZ,OAAAA,CAAA,CACR,8BAvFCrB,EAAA,mBAiBM,MAAA,CAjBD,MAAKL,EAAAA,eAAA,CAAC,YAAoBN,EAAW,KAAA,CAAA,CAAA,GACxCe,EAAA,mBAcO,OAdPH,EAcO,cAbL,EAAAD,EAAA,mBAYM,MAAA,CAXJ,MAAM,kBACN,MAAM,6BACL,QAASkB,EAAU,MACpB,cAAY,MAAA,GAEZd,EAAAA,mBAKU,SAAA,CAJR,MAAM,kBACN,GAAG,MACH,GAAG,MACF,EAAGgB,EAAe,KAAA,qBAIhBE,EAAI,oBAAbtB,qBAAmE,IAAnEuB,EAAmEN,EAAXK,gBAAAA,EAAI,IAAA,EAAA,CAAA,sfC4BhE,MAAMnC,EAAQC,EAqDRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,cAAcH,EAAM,UAAU,EAAE,EAC/BA,EAAM,YAAcA,EAAM,YAAc,WAC1C,CAAC,cAAcA,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IAC1D,mBAAoBA,EAAM,MAC1B,sBAAuBA,EAAM,SAC7B,uBAAwBA,EAAM,cAAgB,MAChD,EACD,8BA1GCa,EAAA,mBAmCS,SAAA,CAlCP,MAAKL,EAAAA,eAAA,CAAC,YACEN,EAAW,KAAA,CAAA,EAClB,SAAUmC,EAAQ,SAClB,KAAMC,EAAI,IAAA,GAGH3B,EAAAA,OAAO,MAAQC,EAAAA,uBAA2B2B,EAAS,WAD3DnC,EAAA,UAAA,EAAAS,EAAAA,mBAKO,OALPK,EAKO,CADLH,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gCAGduB,EAAS,WADjBnC,EAAA,UAAA,EAAAS,EAAAA,mBAMO,OANPM,EAMO,CADLO,EAAAA,YAAuDc,EAAA,CAA7C,MAAO,CAAyB,MAAA,cAAA,EAAE,KAAK,qCAEvC7B,EAAM,OAAC,MAAQC,EAAY,cAAA,QAAvCR,EAAAA,YAAAS,EAAAA,mBAEO,OAFPuB,EAEO,CADLrB,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,oBAEtBH,qBAMO,OAAA,OAJL,MAAM,mBACL,mCAAqB0B,EAAS,UAAA,SAAA,SAAA,CAAA,CAAA,GAE/BxB,EAAAA,WAAyBC,sBAAzB,IAAyB,+BAAnB,cAAY,EAAA,WAGZL,EAAAA,OAAO,MAAQC,EAAAA,wBAA4B2B,EAAS,WAD5DnC,EAAA,UAAA,EAAAS,EAAAA,mBAKO,OALP4B,EAKO,CADL1B,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mZCL1B,MAAMhB,EAAQC,EA+BRC,EAAcC,EAAAA,SAAS,KACpB,CACL,aAAcH,EAAM,SACtB,EACD,EAEK0C,EAAOC,gBAjEXvC,YAAA,EAAAS,qBAmBM,MAnBNC,EAmBM,CAlBJG,EAAA,mBAcE,QAdF2B,aAcE,CAbC,GAAIC,EAAE,GACP,KAAK,WACL,MAAK,CAAC,qBACE3C,EAAW,KAAA,EAClB,KAAM4C,EAAI,KACV,QAASC,EAAU,WACnB,cAAeC,EAAa,cAC5B,SAAUX,EAAQ,SAClB,eAAcY,EAAS,SAAA,EAChBC,EAAM,OAAA,CACb,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAWV,EAA2B,oBAAAU,EAAO,OAA4B,OAAO,EAAA,cAI5EC,EAAK,qBAAlBxC,EAAAA,mBAEQ,QAAA,OAFa,IAAKgC,EAAE,GAAE,MAAM,oBAAA,IAC/BQ,gBAAAA,EAAK,KAAA,EAAA,EAAAlC,CAAA,oOCOd,MAAMnB,EAAQC,EA0BRqD,EAAgBC,EAAc,IAAA,EAAE,EAEtCC,EAAA,MACE,IAAMxD,EAAM,WACXyD,GAAa,CACEH,EAAA,MAAQG,GAAY,CAAC,CACrC,EACA,CAAE,UAAW,EAAK,CACpB,EAEM,MAAAC,EAAW,CAACC,EAAoBC,IAAkB,CACtD,IAAIC,EAAS,CAAC,GAAGP,EAAc,KAAK,EAEhCK,GAAa,CAACE,EAAO,SAASD,CAAK,EACrCC,EAAO,KAAKD,CAAK,EAEjBC,EAASA,EAAO,OAAQC,GAAQA,IAAQF,CAAK,EAG/ClB,EAAK,oBAAqBmB,CAAM,EAChCP,EAAc,MAAQO,CACxB,EAEME,EAAuB5D,EAAAA,SAAS,KAC7B,CACL,8BAA+BH,EAAM,MACvC,EACD,EAEKgE,EAAkB7D,EAAAA,SAAS,KACxB,CACL,oCAAqCH,EAAM,MAC7C,EACD,EAEK0C,EAAOC,8BArFX9B,EAAA,mBAcM,MAAA,CAdD,MAAKL,EAAAA,eAAA,CAAC,sBAA8BuD,EAAoB,KAAA,CAAA,CAAA,oBAC3DlD,EAAAA,mBAYEU,EAAA,SAAA,KAAA0C,EAAAA,WAXiBC,EAAO,QAAjBC,kBADT9D,EAAA,YAYE+D,EAAA,CAVC,GAAID,EAAO,GACX,IAAKA,EAAO,GACZ,MAAOA,EAAO,MACd,aAAYA,EAAO,UACnB,KAAMrB,EAAI,KACX,MAAKtC,EAAAA,eAAA,CAAC,iBACEwD,EAAe,KAAA,CAAA,EACtB,cAAajB,EAAU,WAAGA,EAAU,WAAC,SAASoB,EAAO,KAAK,EAAI,OAC9D,SAAUA,EAAO,SACjB,sBAAqBE,GAAeX,EAASW,EAAGF,EAAO,KAAK,ucCoBnE,MAAMnE,EAAQC,EA8CRqE,EAAwBnE,EAAAA,SAAS,KAC9B,CACL,WAAYH,EAAM,QAClB,aAAcA,EAAM,SACtB,EACD,gBAnFCI,YAAA,EAAAS,qBAwBM,MAxBNC,EAwBM,CAvBJG,EAAAA,mBAKQ,QAAA,CALD,MAAM,kBAAmB,IAAK4B,EAAE,EAAA,GAClCQ,kBAAAA,EAAAA,gBAAAA,EAAAA,KAAK,EAAG,IACX,CAAA,EAAYkB,EAAe,iBAA3BnE,EAAA,UAAA,EAAAS,EAAAA,mBAEC,OAFDM,EACG,IAAIoD,EAAAA,gBAAAA,EAAAA,eAAe,EAAG,IAAC,CAAA,qCAIhBC,EAAAA,QAAUC,EAAQ,wBAA9B5D,qBAES,OAAA,OAFwB,GAAI2D,EAAM,OAAE,MAAM,gBAAA,IACjDC,gBAAAA,EAAQ,QAAA,EAAA,EAAArC,CAAA,+BAGVnB,EAAA,mBAEM,MAFNwB,EAEM,CADJ1B,aAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,IAID0D,EAAO,SAAIzB,EAAS,YAAK0B,EAAO,uBADzC9D,EAAA,mBAOO,OAAA,OALL,MAAKL,EAAAA,eAAA,CAAC,+BAEE8D,EAAqB,KAAA,CAAA,EAD5B,GAAIM,EAAS,SAAA,IAGXD,gBAAAA,EAAO,OAAA,EAAA,GAAAE,CAAA,8XCOhB,MAAM7E,EAAQC,EAsCRqE,EAAwBnE,EAAAA,SAAS,KAC9B,CACL,WAAYH,EAAM,QAClB,aAAcA,EAAM,SACtB,EACD,gBAxECI,YAAA,EAAAS,qBAqBW,WArBXC,EAqBW,CApBTG,EAAAA,mBAKS,SAAA,CALD,MAAM,mBAAoB,IAAK4B,EAAE,EAAA,GACpCiC,kBAAAA,EAAAA,gBAAAA,EAAAA,MAAM,EAAG,IACZ,CAAA,EAAYP,EAAe,iBAA3BnE,EAAA,UAAA,EAAAS,EAAAA,mBAEC,OAFDM,EACG,IAAIoD,EAAAA,gBAAAA,EAAAA,eAAe,EAAG,IAAC,CAAA,qCAIhBE,EAAQ,wBAApB5D,EAAAA,mBAAkE,OAAlEuB,EAAkEN,EAAAA,gBAAlB2C,EAAQ,QAAA,EAAA,CAAA,+BAExDxD,EAAA,mBAEM,MAFNwB,GAEM,CADJ1B,aAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,IAID0D,EAAO,SAAIzB,EAAS,YAAK0B,EAAO,uBADzC9D,EAAA,mBAMO,OAAA,OAJL,MAAKL,EAAAA,eAAA,CAAC,+BACE8D,EAAqB,KAAA,CAAA,CAAA,oBAE1BK,EAAO,OAAA,EAAA,CAAA,0UCFhB,MAAM3E,EAAQC,EAyCRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,cAAcH,EAAM,UAAU,EAAE,EAC/BA,EAAM,YAAcA,EAAM,YAAc,WAC1C,CAAC,cAAcA,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IAC1D,mBAAoBA,EAAM,MAC1B,sBAAuBA,EAAM,QAC/B,EACD,8BAlECa,EAAA,mBASS,SAAA,CARP,MAAKL,EAAAA,eAAA,CAAC,mCACEN,EAAW,KAAA,CAAA,EAClB,SAAUmC,EAAQ,SAClB,KAAMC,EAAI,IAAA,GAEXrB,EAAA,mBAEO,OAFPC,GAEO,CADLH,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,8KCG1B,MAAMhB,EAAQC,EAsBRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,oBAAoBH,EAAM,UAAU,EAAE,EACrCA,EAAM,YAAcA,EAAM,YAAc,WAC1C,CAAC,oBAAoBA,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,GAClE,EACD,8BAtCCa,EAAA,mBAEO,OAAA,CAFD,MAAKL,EAAAA,eAAA,CAAC,kBAA0BN,EAAW,KAAA,CAAA,qBAC5CmD,EAAK,KAAA,EAAA,CAAA,+LCDVxC,EAAA,mBAIM,MAAA,CAJD,MAAKL,iBAAA,CAAC,aAAY,CAAA,aAAyBuE,EAAS,UAAA,CAAA,CAAA,GACvD9D,EAAAA,mBAEM,MAAA,CAFD,KAAK,SAAS,SAAS,KAAM,kBAAiB+D,EAAW,WAAA,GAC5DjE,aAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,oDCECiE,GAAA,CACX,KAAM,sBACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAhBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA7E,EAAA,UAAA,EAAAS,EAAA,mBAEJ,MAFIC,GAEJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CADJlC,EAAAA,mBAAmT,OAAA,CAA7S,YAAU,UAAU,EAAE,qRAAA,EAAA,KAAA,EAAA,6gBCkD9B,MAAMjB,EAAQC,EAoDRC,EAAcC,EAAAA,SAAS,KAAO,CAClC,aAAcH,EAAM,SAAA,EACpB,EAGI+C,EAAaQ,EAAAA,IAAIvD,EAAM,UAAU,EACjC+E,EAAYxB,MAAI,EAAK,EAKrB2B,EAAa,IAAM,CACvBnC,EAAW,MAAQ,GACnBL,EAAK,oBAAqB,EAAE,CAC9B,EAKMyC,EAAmB,IAAM,CACnBJ,EAAA,MAAQ,CAACA,EAAU,KAC/B,EAKMK,EAAYjF,EAAAA,SAAS,IAAO4E,EAAU,MAAQ,OAAS,UAAW,EAKlEM,EAAclF,EAAAA,SAAS,IAAO4E,EAAU,MAAQ,OAAS,OAAQ,EAEjErC,EAAOC,8BAvIX9B,EAAA,mBAuCM,MAAA,CAvCD,MAAKL,EAAAA,eAAA,CAAC,kCAA0CN,EAAW,KAAA,CAAA,CAAA,GAC9DoF,iBAAArE,EAAAA,mBAcE,QAdF2B,aAcE,CAbA,MAAM,yFACGG,EAAU,MAAAK,GAClB,GAAIP,EAAE,GACN,KAAMuC,EAAS,MACf,KAAMtC,EAAI,KACV,YAAayC,EAAW,YACxB,SAAUlD,EAAQ,SAClB,eAAcY,EAAS,UACvB,SAAUuC,EAAQ,QAAA,EACXtC,EAAM,OAAA,CACb,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAWV,EAA2B,oBAAAU,EAAO,OAA4B,KAAK,mCAT3EL,EAAU,KAAA,CAAA,GAaV0C,EAAAA,aAAe1C,EAAU,OAApC3C,cAAAS,EAAA,mBAWM,MAXNK,GAWM,CAVJD,EAAAA,mBASS,SAAA,CARP,MAAM,8BACL,QAAOiE,CAAA,GAERxD,EAAAA,YAGEgE,EAAA,CAFA,MAAM,4BACN,cAAY,MAAA,GAEdzE,qBAAgE,OAAhEE,GAAgEW,kBAApB6D,EAAU,UAAA,EAAA,CAAA,mCAG1DjE,EAAAA,YAUUkE,EAAA,CATR,IAAI,SACJ,KAAK,SACJ,eAAcP,EAAW,MACzB,SAAUhD,EAAQ,SAClB,QAAO8C,EACR,KAAK,IACL,MAAA,EAAA,qBAEA,IAAqD,CAAlDtD,EAAAA,gBAAAC,EAAA,gBAAAiD,EAAA,MAAYc,EAAW,YAAC,KAAOA,EAAAA,YAAY,IAAI,EAAA,CAAA,CAAA,kFC1BzCC,GAAA,CACX,KAAM,SACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAvBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA1F,EAAA,UAAA,EAAAS,EAAA,mBASJ,MATIC,GASJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CARJlC,EAAAA,mBAEI,IAFD,CAAA,YAAU,SAAS,EAAA,CACpBA,EAAAA,mBAAgH,OAAA,CAA1G,YAAU,UAAU,EAAE,kFAAA,CAAA,OAE9BA,EAIO,mBAAA,OAAA,KAAA,CAHLA,EAAAA,mBAEW,WAFD,CAAA,GAAG,GAAG,EAAA,CACdA,EAAAA,mBAA0C,OAAA,CAApC,MAAM,KAAK,OAAO,KAAK,KAAK,MAAA,CAAA,2CCMzB8E,GAAA,CACX,KAAM,SACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAvBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA3F,EAAA,UAAA,EAAAS,EAAA,mBASJ,MATIC,GASJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CARJlC,EAAAA,mBAEI,IAFD,CAAA,YAAU,SAAS,EAAA,CACpBA,EAAAA,mBAAqF,OAAA,CAA/E,YAAU,UAAU,EAAE,uDAAA,CAAA,OAE9BA,EAIO,mBAAA,OAAA,KAAA,CAHLA,EAAAA,mBAEW,WAFD,CAAA,GAAG,GAAG,EAAA,CACdA,EAAAA,mBAA0C,OAAA,CAApC,MAAM,KAAK,OAAO,KAAK,KAAK,MAAA,CAAA,8wBCqDxC,MAAMjB,EAAQC,EA+DR+F,EAAezC,EAAAA,IAAIvD,EAAM,UAAU,EAEnCwD,QAAAwC,EAAeC,GAAW,CAC1BA,IAAWjG,EAAM,YACnB0C,EAAK,oBAAqBuD,CAAM,CAClC,CACD,EAEK,MAAA/F,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,yBAAyBH,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IACrE,aAAcA,EAAM,SACtB,EACD,EAEKkG,EAAY,IAAM,CAClBF,EAAa,MAAQhG,EAAM,MAAQA,EAAM,IAC3CgG,EAAa,OAAShG,EAAM,KAE5BgG,EAAa,MAAQhG,EAAM,GAE/B,EAEMmG,EAAY,IAAM,CAClBH,EAAa,MAAQhG,EAAM,KAAOA,EAAM,IAC1CgG,EAAa,OAAShG,EAAM,KAE5BgG,EAAa,MAAQhG,EAAM,GAE/B,EAEM0D,EAAYE,GAAkB,CAClCoC,EAAa,MAAQpC,EAEjBoC,EAAa,MAAQhG,EAAM,MAC7BgG,EAAa,MAAQhG,EAAM,KAEzBgG,EAAa,OAAShG,EAAM,MAC9BgG,EAAa,MAAQhG,EAAM,KAGxB0C,EAAA,oBAAqBsD,EAAa,KAAK,CAC9C,EAEMtD,EAAOC,8BArKX9B,EAAA,mBA+CM,MAAA,CA/CD,MAAKL,EAAAA,eAAA,CAAC,uBAA+BN,EAAW,KAAA,CAAA,CAAA,GACnDoF,iBAAArE,EAAAA,mBAiBE,QAjBF2B,aAiBE,CAhBC,GAAIC,EAAE,wCACEmD,EAAY,MAAA5C,GACrB,MAAM,gCACN,KAAK,SACJ,KAAMN,EAAI,KACV,SAAUT,EAAQ,SAClB,IAAK+D,EAAG,IACR,IAAKC,EAAG,IACR,KAAMC,EAAI,KACV,SAAUd,EAAQ,SAClB,eAAcvC,EAAS,UACvB,gBAAemD,EAAG,IAClB,gBAAeC,EAAG,IAClB,gBAAeL,EAAY,KAAA,EACpB9C,EAAM,OAAA,CACb,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEM,EAAS,OAAQN,EAAO,OAA4B,KAAK,CAAA,gCAdzD4C,EAAY,KAAA,CAAA,GAiBdR,EAAQ,oDADjB3E,EAAAA,mBAaS,SAAA,OAXP,KAAK,SACJ,gBAAegC,EAAE,GAClB,MAAM,sEACN,SAAS,KACR,SAAUR,EAAAA,UAAY2D,EAAA,QAAiBK,EAAG,IAC1C,QAAOH,CAAA,GAERjF,EAAA,mBAEO,OAFPE,GAEO,CADLO,EAAAA,YAAU6E,EAAA,CAAA,GAEZtF,qBAAqE,OAArEmB,GAAqEN,kBAAxB0E,EAAc,cAAA,EAAA,CAAA,UAGpDhB,EAAQ,oDADjB3E,EAAAA,mBAaS,SAAA,OAXP,KAAK,SACJ,gBAAegC,EAAE,GAClB,MAAM,sEACN,SAAS,KACR,SAAUR,EAAAA,UAAY2D,EAAA,QAAiBI,EAAG,IAC1C,QAAOD,CAAA,GAERlF,EAAA,mBAEO,OAFP4D,GAEO,CADLnD,EAAAA,YAAU+E,EAAA,CAAA,GAEZxF,qBAAqE,OAArEyF,GAAqE5E,kBAAxB6E,EAAc,cAAA,EAAA,CAAA,0UClBjE,MAAM3G,EAAQC,EA2BRC,EAAcC,EAAAA,SAAS,KACpB,CACL,aAAcH,EAAM,SACtB,EACD,EAEK0C,EAAOC,gBA5DXvC,YAAA,EAAAS,qBAkBM,MAlBNC,GAkBM,CAjBJG,EAAA,mBAaE,QAbF2B,aAaE,CAZC,GAAIC,EAAE,GACP,KAAK,QACL,MAAK,CAAC,kBACE3C,EAAW,KAAA,EAClB,KAAM4C,EAAI,KACV,QAASC,EAAU,WACnB,SAAUV,EAAQ,SAClB,eAAcY,EAAS,SAAA,EAChBC,EAAM,OAAA,CACb,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAWV,EAA2B,oBAAAU,EAAO,OAA4B,OAAO,EAAA,eAI5EC,EAAK,qBAAlBxC,EAAAA,mBAEQ,QAAA,OAFa,IAAKgC,EAAE,GAAE,MAAM,iBAAA,IAC/BQ,gBAAAA,EAAK,KAAA,EAAA,EAAAlC,EAAA,2PCUd,MAAMnB,EAAQC,EA6BR8D,EAAuB5D,EAAAA,SAAS,KAC7B,CACL,8BAA+BH,EAAM,MACvC,EACD,EAEKgE,EAAkB7D,EAAAA,SAAS,KACxB,CACL,oCAAqCH,EAAM,MAC7C,EACD,EAEK0C,EAAOC,8BAnEX9B,EAAA,mBAgBM,MAAA,CAhBD,MAAKL,EAAAA,eAAA,CAAC,sBAA8BuD,EAAoB,KAAA,CAAA,CAAA,oBAC3DlD,EAAAA,mBAcEU,EAAA,SAAA,KAAA0C,EAAAA,WAbiBC,EAAO,QAAjBC,kBADT9D,EAAA,YAcEuG,EAAA,CAZC,GAAIzC,EAAO,GACX,IAAKA,EAAO,GACZ,MAAOA,EAAO,MACd,aAAYlB,EAAS,UACrB,KAAMH,EAAI,KACX,MAAKtC,EAAAA,eAAA,CAAC,iBACEwD,EAAe,KAAA,CAAA,EACtB,cAAajB,EAAAA,aAAeoB,EAAO,MACnC,SAAUA,EAAO,SACjB,sBAA8BE,GAAgBA,EAAI3B,EAA0B,oBAAAyB,EAAO,KAAK,EAAA,weCqB/F,MAAMnE,EAAQC,EAkDRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,cAAcH,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IAC1D,sBAAuBA,EAAM,SAC7B,aAAcA,EAAM,SACtB,EACD,EAEK0C,EAAOC,gBA3FXvC,YAAA,EAAAS,qBAwBS,SAxBT+B,EAAAA,WAwBS,CAvBN,GAAIC,EAAE,GACP,MAAK,CAAC,YAGE3C,EAAW,KAAA,EAFlB,KAAM4C,EAAI,KACV,MAAOC,EAAU,WAEjB,SAAUV,EAAQ,QAAA,EACXa,EAAM,OAAA,CACb,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAASV,EAA2B,oBAAAU,EAAO,OAA6B,KAAK,EAAA,IAItEmC,EAAW,aAAzBnF,YAAA,EAAAS,EAAA,mBAES,SAFTK,GAA6C,OACrCqE,EAAAA,gBAAAA,EAAAA,WAAW,EAAG,OACtB,CAAA,gCACAnF,EAAAA,UAAA,EAAA,EAAAS,EAQS,mBAAAU,WAPmB2C,KAAAA,EAAAA,WAAAA,EAAAA,QAAlB,CAAAC,EAAQ9C,KADlBjB,YAAA,EAAAS,qBAQS,SART+B,EAAAA,WAQS,CANN,IAAKvB,EACL,MAAO8C,EAAO,OACP,CAAA,QAAA,IAAAA,EAAO,WAAU,CACxB,SAAUA,EAAO,QAAA,CAEf,EAAArC,EAAA,gBAAAqC,EAAO,IAAI,EAAA,GAAAhD,EAAA,sJCdpB,MAAMnB,EAAQC,EAgBRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,kBAAkBH,EAAM,MAAM,EAAE,EAAGA,EAAM,QAAUA,EAAM,QAAU,OACpE,CAAC,kBAAkBA,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,GAChE,EACD,8BA7BCa,EAAA,mBAAwD,OAAA,CAAlD,MAAKL,EAAAA,eAAA,CAAC,gBAAwBN,EAAW,KAAA,CAAA,CAAA,qLCYjD,MAAMF,EAAQC,EAgBRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,oBAAoBH,EAAM,MAAM,EAAE,EACjCA,EAAM,QAAUA,EAAM,QAAU,MACpC,EACD,8BAjCCa,EAAA,mBAGM,MAAA,CAHD,MAAKL,EAAAA,eAAA,CAAC,kBAA0BN,EAAW,KAAA,CAAA,CAAA,GAC9CwB,cAA+BmF,GAAA,CAAlB,OAAQC,EAAM,MAAA,EAAA,KAAA,EAAA,CAAA,QAAA,CAAA,EAC3B7F,qBAAuD,OAAvDH,GAAuDgB,kBAAfuB,EAAK,KAAA,EAAA,CAAA,6CCSlC0D,GAAA,CACX,KAAM,UACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAvBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA3G,EAAA,UAAA,EAAAS,EAAA,mBASJ,MATIC,GASJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CARJlC,EAAAA,mBAEI,IAFD,CAAA,YAAU,SAAS,EAAA,CACpBA,EAAAA,mBAAkO,OAAA,CAA5N,YAAU,UAAU,EAAE,oMAAA,CAAA,OAE9BA,EAIO,mBAAA,OAAA,KAAA,CAHLA,EAAAA,mBAEW,WAFD,CAAA,GAAG,GAAG,EAAA,CACdA,EAAAA,mBAA0C,OAAA,CAApC,MAAM,KAAK,OAAO,KAAK,KAAK,MAAA,CAAA,2CCDzB+F,GAAA,CACX,KAAM,eACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAhBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA5G,EAAA,UAAA,EAAAS,EAAA,mBAEJ,MAFIC,GAEJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CADJlC,EAAAA,mBAAmS,OAAA,CAA7R,YAAU,UAAU,EAAE,qQAAA,EAAA,KAAA,EAAA,oCCIfgG,GAAA,CACX,KAAM,kBACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAhBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA7G,EAAA,UAAA,EAAAS,EAAA,mBAEJ,MAFIC,GAEJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CADJlC,EAAAA,mBAAkS,OAAA,CAA5R,YAAU,UAAU,EAAE,oQAAA,EAAA,KAAA,EAAA,oCCIfiG,GAAA,CACX,KAAM,gBACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAhBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA9G,EAAA,UAAA,EAAAS,EAAA,mBAEJ,MAFIC,GAEJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CADJlC,EAAAA,mBAAyW,OAAA,CAAnW,YAAU,UAAU,EAAE,2UAAA,EAAA,KAAA,EAAA,oCCIfkG,GAAA,CACX,KAAM,gBACN,MAAO,CAIP,MAAO,CACL,KAAM,OACN,QAAS,cAAA,CACX,CAEJ,MAhBe,MAAM,6BAA6B,QAAQ,sCAAhD,OAAA/G,EAAA,UAAA,EAAAS,EAAA,mBAEJ,MAFIC,GAEJqC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CADJlC,EAAAA,mBAA8R,OAAA,CAAxR,YAAU,UAAU,EAAE,gQAAA,EAAA,KAAA,EAAA,kYC0C9B,MAAMjB,EAAQC,EA+BRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,2BAA2BH,EAAM,MAAM,EAAE,EACxCA,EAAM,QAAUA,EAAM,QAAU,MACpC,EACD,EAEKoH,EAAgBjH,EAAAA,SAAS,IAAM,CACnC,OAAQH,EAAM,OAAQ,CACpB,IAAK,UACI,OAAAqH,GACT,IAAK,UACI,OAAAC,GACT,IAAK,QACI,OAAAC,GACT,IAAK,OACL,QACS,OAAAC,EAAA,CACX,CACD,EAEK9E,EAAOC,8BA9FX9B,EAAA,mBA6BU,UAAA,CA7BD,MAAKL,EAAAA,eAAA,CAAC,yBAA+CN,EAAW,KAAA,CAAA,EAAjC,KAAK,QAAA,IAC3CE,EAAAA,UAAA,EAAAC,EAAA,YAIEC,EAHK,wBAAA8G,EAAa,KAAA,EAAA,CAClB,MAAM,+BACN,cAAY,MAAA,IAEdnG,EAAA,mBAUM,MAVNH,GAUM,CATJG,qBAA0D,KAA1DC,GAA0DY,EAAAA,gBAAb2F,EAAK,KAAA,EAAA,CAAA,EAElDxG,qBAEI,IAFJE,GAEIW,EAAAA,gBADC4F,EAAW,WAAA,EAAA,CAAA,EAGL/G,EAAAA,OAAO,QAAlBP,EAAAA,UAAA,EAAAS,EAAA,mBAEM,MAFNuB,GAEM,CADJrB,aAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kCAKlB2G,EAAQ,wBADhB9G,EAAAA,mBAUS,SAAA,OARP,MAAM,yCACL,uBAAO6B,EAAI,OAAA,EAAA,GAEZhB,EAAAA,YAGEkG,GAAA,CAFA,MAAM,wCACN,cAAY,MAAA,GAEdzE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAlC,EAAAA,mBAAgE,OAA1D,CAAA,MAAM,yCAAwC,QAAK,EAAA,EAAA,sbCD/D,MAAMjB,EAAQC,EAgDRC,EAAcC,EAAAA,SAAS,KACpB,CACL,aAAcH,EAAM,SACtB,EACD,EAEK0C,EAAOC,gBAhFXvC,YAAA,EAAAS,qBAiBE,WAjBF+B,EAAAA,WAiBE,CAhBC,GAAIC,EAAE,GACP,MAAK,CAAC,cACE3C,EAAW,KAAA,EAClB,eAAc+C,EAAS,UACvB,MAAOF,EAAU,WACjB,KAAMD,EAAI,KACV,YAAayC,EAAW,YACxB,SAAUlD,EAAQ,SAClB,UAAWwF,EAAS,UACpB,UAAWC,EAAS,UACpB,KAAMC,EAAI,KACV,SAAUvC,EAAQ,QAAA,EACXtC,EAAM,OAAA,CACb,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAASV,EAA2B,oBAAAU,EAAO,OAA4B,KAAK,EAAA,2hBC8BtF,MAAMpD,EAAQC,EAoERC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,kBAAkBH,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,IAC9D,aAAcA,EAAM,SACtB,EACD,EAEK+C,EAAaQ,EAAAA,IAAIvD,EAAM,UAAU,EACjCkF,EAAa,IAAM,CACvBnC,EAAW,MAAQ,GACnBL,EAAK,oBAAqB,EAAE,CAC9B,EAEMA,EAAOC,8BA7HX9B,EAAA,mBAkCM,MAAA,CAlCD,MAAKL,EAAAA,eAAA,CAAC,gBAAwBN,EAAW,KAAA,CAAA,CAAA,GAChCS,EAAAA,OAAO,MAAnBP,EAAAA,UAAA,EAAAS,EAAA,mBAEO,OAFPC,GAEO,CADLC,aAAoBC,EAAA,OAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gCAGtBC,EAAA,mBAcE,QAdF2B,aAcE,CAbC,GAAIC,EAAE,GACP,MAAM,yBACL,MAAOE,EAAU,MACjB,KAAMqC,EAAS,UACf,KAAMtC,EAAI,KACV,YAAayC,EAAW,YACxB,SAAUlD,EAAQ,SAClB,eAAcY,EAAS,UACvB,SAAUuC,EAAQ,QAAA,EACXtC,EAAM,OAAA,CACb,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAWV,EAA2B,oBAAAU,EAAO,OAA4B,KAAK,EAAA,eAK3EqC,EAAAA,aAAe1C,EAAU,OAApC3C,cAAAS,EAAA,mBAYM,MAZNM,GAYM,CAXJF,EAAAA,mBAUS,SAAA,CATP,KAAK,SACL,MAAM,8BACL,QAAOiE,CAAA,GAERxD,EAAAA,YAGEgE,EAAA,CAFA,MAAM,4BACN,cAAY,MAAA,GAEdvC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAlC,EAAAA,mBAA4D,OAAtD,CAAA,MAAM,8BAA6B,eAAY,EAAA,qUCJ7D,MAAMjB,EAAQC,EAgCRC,EAAcC,EAAAA,SAAS,KACpB,CACL,CAAC,cAAcH,EAAM,IAAI,EAAE,EAAGA,EAAM,MAAQA,EAAM,MAAQ,GAC5D,EACD,EAEK0C,EAAOC,8BAjEX9B,EAAA,mBAkBM,MAAA,CAlBD,MAAKL,EAAAA,eAAA,CAAC,YAAoBN,EAAW,KAAA,CAAA,CAAA,GACxCe,EAAAA,mBAgBQ,QAAA,CAhBD,MAAM,uBAAwB,IAAK4B,EAAE,EAAA,GAC1C5B,EAAA,mBAWE,QAXF2B,aAWE,CAVC,GAAIC,EAAE,GACP,KAAK,WACL,MAAM,mBACL,KAAMC,EAAI,KACV,QAASC,EAAU,WACnB,SAAUV,EAAQ,QAAA,EACXa,EAAM,OAAA,CACb,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAaV,EAA2B,oBAAAU,EAAO,OAA4B,OAAO,EAAA,eAI/EC,EAAK,qBAAjBxC,EAAAA,mBAEO,OAAA,OAFa,IAAKgC,EAAE,GAAE,MAAM,kBAAA,IAC9BQ,gBAAAA,EAAK,KAAA,EAAA,EAAAlC,EAAA,4OCQhB,MAAMnB,EAAQC,EA2BRqD,EAAgBC,EAAc,IAAA,EAAE,EAEtCC,EAAA,MACE,IAAMxD,EAAM,WACXyD,GAAa,CACEH,EAAA,MAAQG,GAAY,CAAC,CACrC,EACA,CAAE,UAAW,EAAK,CACpB,EAEM,MAAAC,EAAW,CAACC,EAAoBC,IAAkB,CACtD,IAAIC,EAAS,CAAC,GAAGP,EAAc,KAAK,EAEhCK,GAAa,CAACE,EAAO,SAASD,CAAK,EACrCC,EAAO,KAAKD,CAAK,EAEjBC,EAASA,EAAO,OAAQC,GAAQA,IAAQF,CAAK,EAG/ClB,EAAK,oBAAqBmB,CAAM,EAChCP,EAAc,MAAQO,CACxB,EAEME,EAAuB5D,EAAAA,SAAS,KAC7B,CACL,8BAA+BH,EAAM,MACvC,EACD,EAEKgE,EAAkB7D,EAAAA,SAAS,KACxB,CACL,oCAAqCH,EAAM,MAC7C,EACD,EAEK0C,EAAOC,8BArFX9B,EAAA,mBAaM,MAAA,CAbA,uBAAOkD,EAAoB,KAAA,CAAA,oBAC/BlD,EAAAA,mBAWEU,EAAA,SAAA,KAAA0C,EAAAA,WAViBC,EAAO,QAAjBC,kBADT9D,EAAA,YAWE2H,EAAA,CATC,GAAI7D,EAAO,GACX,IAAKA,EAAO,GACZ,MAAOA,EAAO,MACd,aAAYA,EAAO,UACnB,KAAMrB,EAAI,KACV,uBAAOkB,EAAe,KAAA,EACtB,cAAajB,EAAU,WAAGA,EAAU,WAAC,SAASoB,EAAO,KAAK,EAAI,OAC9D,SAAUA,EAAO,SACjB,sBAAqBE,GAAeX,EAASW,EAAGF,EAAO,KAAK","x_google_ignoreList":[11,13,14,21,22,23,24,25]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.7",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -9,6 +9,7 @@
   "types": "./dist/mozaic-vue.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/mozaic-vue.d.ts",
       "import": "./dist/mozaic-vue.js",
       "require": "./dist/mozaic-vue.umd.cjs"
     },
@@ -39,7 +40,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "2.0.0-alpha.0",
+    "@mozaic-ds/styles": "2.0.0-alpha.4",
     "@mozaic-ds/web-fonts": "1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"

package/src/components/GettingStarted.mdx

@@ -14,26 +14,37 @@ In order to use **Mozaic-Vue** in your **Vue.js** project, you must first instal
 <Source
   language="bash"
   dark
-  code="npm install @mozaic-ds/vue --save --save-exact"
+  code="npm i @mozaic-ds/vue@beta"
 />
 
 Or with **Yarn**:
 
-<Source language="bash" dark code="yarn add @mozaic-ds/vue -E" />
+<Source language="bash" dark code="yarn add @mozaic-ds/vue@beta" />
 
 ## 📝 Usage
 
-Now you can import any components in your Vue files and use it directly.
+Import the styles
+
+<Source
+  language='typescript'
+  dark
+  code={`
+// main.ts
+
+import '@mozaic-ds/vue/style.css';
+`} />
+
+To import and use a component, you can proceed as follows:
 
 <Source
   language='html'
   dark
   code={`
 <script setup>
-  import { MButton } from '@mozaic-ds/vue'
+  import { MButton } from '@mozaic-ds/vue';
 </script>
 
 <template>
-  <MButton label="This is a Mozaic Button" />
+  <MButton>Button Label</MButton>
 </template>
 `} />

package/src/components/Introduction.mdx

@@ -1,19 +1,45 @@
 import { Meta } from '@storybook/blocks';
 import { Source } from '@storybook/addon-docs';
-import logo from '../../.storybook/assets/logo.svg';
+import ads from '../../.storybook/assets/logo.svg';
+import vue from '../../.storybook/assets/vue.svg';
 
 <Meta title="Introduction" />
 
-<h1>
+
+<p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
   <img
-    src={logo}
-    alt="Mozaic-Vue logo"
-    style={{ height: '48px', marginRight: '8px', verticalAlign: 'middle' }}
+    src={ads}
+    alt="ADEO Design system logo"
+    style={{ height: '80px' }}
   />
-  <span style={{ fontSize: '32px' }}>Vue.js library</span>
-</h1>
-
-This project contains **Vue.js** components that implements the **ADEO Design system** guidelines.
+  <span style={{ fontSize: '32px' }}>x</span>
+  <img
+    src={vue}
+    alt="Vue.js logo"
+    style={{ height: '80px' }}
+  />
+</p>
+
+<h1 align="center">ADEO Design system - Vue.js library</h1>
+
+<p align="center">A library of **Vue.js** components implementing **ADEO Design system** guidelines.</p>
+
+<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
+  <a href="https://www.npmjs.com/package/@mozaic-ds/vue/v/beta">
+    <img src="https://img.shields.io/npm/v/@mozaic-ds/vue/beta?label=NPM&logo=npm&color=yellow" alt="npm beta version"/>
+  </a>
+  <a href="https://github.com/adeo/mozaic-vue/blob/master/CONTRIBUTING.md">
+    <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
+  </a>
+  <a href="https://app.slack.com/client/T4R6RCZFA/CN4K3A99R">
+    <img src="https://img.shields.io/badge/Slack-mozaic_vue-611f69.svg?logo=slack" alt="Slack mozaic-vue" />
+  </a>
+  <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
+    <img src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg" alt="KEYS ADEO Design system" />
+  </a>
+</div>
+
+<br/><br/>
 
 ## 🪄 Introduction
 

package/src/components/Support.mdx

@@ -15,4 +15,4 @@ If you want to get more detailed information on the components or any other topi
 
 - Join the [#mozaic-vue](https://app.slack.com/client/T4R6RCZFA/CN4K3A99R/) channel on **Slack**
 - Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
-- Join our [Workplace group](https://adeo.workplace.com/groups/427492661454646/)
+- Follow our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)

package/src/components/breadcrumb/MBreadcrumb.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MBreadcrumb from './MBreadcrumb.vue';
+
+const MLinkStub = {
+  template: '<a><slot /></a>',
+  props: ['href', 'appearance', 'inline', 'router', 'class', 'ariaCurrent'],
+};
+
+describe('MBreadcrumb', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Electronics', href: '/products/electronics' },
+  ];
+
+  it('renders all breadcrumb links', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const items = wrapper.findAll('.mc-breadcrumb__item');
+    expect(items).toHaveLength(defaultLinks.length);
+    defaultLinks.forEach((link, index) => {
+      expect(items[index].text()).toContain(link.label);
+    });
+  });
+
+  it('adds mc-breadcrumb__current class to the last link', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
+    expect(lastLink?.classes()).toContain('mc-breadcrumb__current');
+  });
+
+  it('sets aria-current="page" on the last link', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
+    expect(lastLink?.attributes('aria-current')).toBe('page');
+  });
+
+  it('does not set aria-current on non-last links', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const linkComponents = wrapper.findAllComponents(MLinkStub);
+    for (let i = 0; i < linkComponents.length - 1; i++) {
+      expect(linkComponents[i].attributes('aria-current')).toBeUndefined();
+    }
+  });
+
+  it('applies appearance class modifier when not standard', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        appearance: 'inverse',
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-breadcrumb--inverse');
+  });
+
+  it('does not apply appearance modifier for standard (default)', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        appearance: 'standard',
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-breadcrumb--standard');
+  });
+});