@mozaic-ds/vue 2.12.0 → 2.13.0

package/src/components/flag/README.md

@@ -8,4 +8,4 @@ A flag is used to display meta-information about a product or service, acting as
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `label*` | Label of the Flag. | `string` | - |
-| `appearance` | Allows to define the Flag appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | - |
+| `appearance` | Allows to define the Flag appearance. | `"standard"` `"danger"` `"inverse"` `"accent"` | - |

package/src/components/iconbutton/MIconButton.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MIconButton from './MIconButton.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24 } from '@mozaic-ds/icons-vue';
 
 describe('MButton component', () => {
   it('renders with an icon', () => {

package/src/components/iconbutton/MIconButton.stories.ts

@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MIconButton from './MIconButton.vue';
-import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
-import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/ChevronRight32.vue';
+import {
+  ChevronRight20,
+  ChevronRight24,
+  ChevronRight32,
+} from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MIconButton> = {
   title: 'Action/Icon Button',
@@ -50,26 +52,133 @@ const meta: Meta<typeof MIconButton> = {
 export default meta;
 type Story = StoryObj<typeof MIconButton>;
 
-export const Standard: Story = {};
+export const Filled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Most visible variant, used to emphasize the primary action on a page or a section.',
+      },
+    },
+  },
+};
 
-export const Outline: Story = {
+export const Outlined: Story = {
   args: { outlined: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
+      },
+    },
+  },
 };
 
 export const Ghost: Story = {
   args: { ghost: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'More discreet, should be used exclusively for canceling or ignoring a task or action.',
+      },
+    },
+  },
 };
 
-export const SizeS: Story = {
+export const Standard: Story = {
+  args: { appearance: 'standard' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
+      },
+    },
+  },
+};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
+      },
+    },
+  },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
+      },
+    },
+  },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
   args: {
     size: 's',
     icon: '<ChevronRight20/>',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
+      },
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'm',
+    icon: '<ChevronRight24/>',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
+      },
+    },
+  },
 };
 
-export const SizeL: Story = {
+export const Large: Story = {
   args: {
     size: 'l',
     icon: '<ChevronRight32/>',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
+      },
+    },
+  },
 };

package/src/components/iconbutton/README.md

@@ -7,7 +7,7 @@ Buttons are key interactive elements used to perform actions and can be used as
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `appearance` | Defines the visual style of the icon button. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `appearance` | Defines the visual style of the icon button. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
 | `size` | Determines the size of the icon button. | `"s"` `"m"` `"l"` | `"m"` |
 | `disabled` | If `true`, disables the icon button, making it non-interactive. | `boolean` | - |
 | `ghost` | If `true`, applies a "ghost" style to the icon button. | `boolean` | - |
@@ -19,3 +19,27 @@ Buttons are key interactive elements used to perform actions and can be used as
 | Name | Description |
 | --- | --- |
 | `icon` | Use this slot to insert an icon for the Button. |
+
+## Dependencies
+
+### Used By
+
+- [MCarousel](../carousel)
+- [MDrawer](../drawer)
+- [MModal](../modal)
+- [MPagination](../pagination)
+- [MStatusNotification](../statusnotification)
+- [MToaster](../toaster)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCarousel --> MIconButton
+  MDrawer --> MIconButton
+  MModal --> MIconButton
+  MPagination --> MIconButton
+  MStatusNotification --> MIconButton
+  MToaster --> MIconButton
+style MIconButton fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/kpiitem/MKpiItem.vue

@@ -23,9 +23,11 @@
 
 <script setup lang="ts">
 import { computed, type Component } from 'vue';
-import ArrowBottomRight24 from '@mozaic-ds/icons-vue/src/components/ArrowBottomRight24/ArrowBottomRight24.vue';
-import ArrowTopRight24 from '@mozaic-ds/icons-vue/src/components/ArrowTopRight24/ArrowTopRight24.vue';
-import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
+import {
+  ArrowBottomRight24,
+  ArrowTopRight24,
+  Less24,
+} from '@mozaic-ds/icons-vue';
 /**
  * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
  */

package/src/components/linearprogressbarbuffer/README.md

@@ -9,3 +9,17 @@ A linear progress bar (Buffer) visually represents the progress of a task along
 | --- | --- | --- | --- | 
 | `size` | Allows to define the progress bar size. | `"s"` `"m"` `"l"` | - |
 | `value` | The current value of the progress bar. | `number` | `0` |
+
+## Dependencies
+
+### Used By
+
+- [MToaster](../toaster)
+
+### Graph
+
+```mermaid
+graph TD;
+  MToaster --> MLinearProgressbarBuffer
+style MLinearProgressbarBuffer fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/link/MLink.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MLink from './MLink.vue';
-import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/ChevronLeft24.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MLink> = {
   title: 'Navigation/Link',

package/src/components/link/README.md

@@ -21,3 +21,17 @@ A link is an interactive text element used to navigate between pages, sections,
 | --- | --- |
 | `default` | Use this slot to insert the textual content of the Link. |
 | `icon` | Use this slot to insert an icon for the Link. |
+
+## Dependencies
+
+### Used By
+
+- [MBreadcrumb](../breadcrumb)
+
+### Graph
+
+```mermaid
+graph TD;
+  MBreadcrumb --> MLink
+style MLink fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/loader/README.md

@@ -10,3 +10,23 @@ A loader is a visual indicator used to inform users that a process is in progres
 | `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
 | `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` `"xs"` | `"m"` |
 | `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |
+
+## Dependencies
+
+### Used By
+
+- [MButton](../button)
+- [MField](../field)
+- [MLoadingOverlay](../loadingoverlay)
+- [MStatusMessage](../statusmessage)
+
+### Graph
+
+```mermaid
+graph TD;
+  MButton --> MLoader
+  MField --> MLoader
+  MLoadingOverlay --> MLoader
+  MStatusMessage --> MLoader
+style MLoader fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/loadingoverlay/README.md

@@ -9,3 +9,17 @@ A loading overlay is a full-screen or container-level layer that indicates a pro
 | --- | --- | --- | --- | 
 | `isVisible` | Controls the visibility of the loading overlay. | `boolean` | - |
 | `text` | Text of the loading overlay. | `string` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MLoadingOverlay --> MLoader
+style MLoadingOverlay fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/modal/MModal.stories.ts

@@ -4,8 +4,7 @@ import { action } from 'storybook/actions';
 import MModal from './MModal.vue';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
-import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
-import ExternalLink24 from '@mozaic-ds/icons-vue/src/components/ExternalLink24/ExternalLink24.vue';
+import { InfoCircle32, ExternalLink24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MModal> = {
   title: 'Overlay/Modal',

package/src/components/modal/MModal.vue

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, watch, type VNode } from 'vue';
-import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
+import { Cross24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
 /**

package/src/components/modal/README.md

@@ -28,3 +28,19 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:open` | Emits when the modal display changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MOverlay](../overlay)
+
+### Graph
+
+```mermaid
+graph TD;
+  MModal --> MIconButton
+  MModal --> MOverlay
+style MModal fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/numberbadge/README.md

@@ -8,5 +8,21 @@ A Number Badge represents a numeric count, often used to indicate notifications,
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `label*` | Content of the badge. | `number` | - |
-| `appearance` | Allows to define the badge appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `appearance` | Allows to define the badge appearance. | `"standard"` `"danger"` `"inverse"` `"accent"` | `"standard"` |
 | `size` | Allows to define the badge size. | `"s"` `"m"` | `"s"` |
+
+## Dependencies
+
+### Used By
+
+- [MTabs](../tabs)
+- [MTag](../tag)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTabs --> MNumberBadge
+  MTag --> MNumberBadge
+style MNumberBadge fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/overlay/README.md

@@ -15,3 +15,19 @@ An overlay is a semi-transparent layer that appears on top of the main content,
 | Name | Description |
 | --- | --- |
 | `default` | Use this slot to insert a centered content inside the overlay. |
+
+## Dependencies
+
+### Used By
+
+- [MDrawer](../drawer)
+- [MModal](../modal)
+
+### Graph
+
+```mermaid
+graph TD;
+  MDrawer --> MOverlay
+  MModal --> MOverlay
+style MOverlay fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/pagination/MPagination.vue

@@ -59,8 +59,7 @@
 import { computed, ref, watch } from 'vue';
 import MButton from '../button/MButton.vue';
 import MSelect from '../select/MSelect.vue';
-import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/ChevronLeft24.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronLeft24, ChevronRight24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 /**
  * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.

package/src/components/pagination/README.md

@@ -18,3 +18,21 @@ Pagination is a navigation component that allows users to browse through large s
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the pagination value changes, updating the modelValue prop. | [value: number] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MIconButton](../iconbutton)
+- [MSelect](../select)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPagination --> MButton
+  MPagination --> MSelect
+  MPagination --> MIconButton
+style MPagination fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/passwordinput/MPasswordInput.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 import MButton from '../button/MButton.vue';
 
 /**

package/src/components/passwordinput/README.md

@@ -23,3 +23,17 @@ A password input is a specialized input field used to securely enter and manage
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPasswordInput --> MButton
+style MPasswordInput fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/phonenumber/MPhoneNumber.spec.ts

@@ -27,15 +27,16 @@ vi.mock('libphonenumber-js', () => ({
   }),
 }));
 
-vi.mock(
-  '@mozaic-ds/icons-vue/src/components/ChevronDown20/ChevronDown20.vue',
-  () => ({
-    default: {
+vi.mock('@mozaic-ds/icons-vue', async () => {
+  const actual = await vi.importActual('@mozaic-ds/icons-vue');
+  return {
+    ...actual,
+    ChevronDown20: {
       name: 'ChevronDown20',
       template: '<svg data-testid="chevron-icon" aria-hidden="true"></svg>',
     },
-  }),
-);
+  };
+});
 
 describe('MPhoneNumber', () => {
   let wrapper: VueWrapper<InstanceType<typeof MPhoneNumber>>;

package/src/components/phonenumber/MPhoneNumber.vue

@@ -70,7 +70,7 @@ import parsePhoneNumberFromString, {
   type CountryCode,
 } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
-import ChevronDown20 from '@mozaic-ds/icons-vue/src/components/ChevronDown20/ChevronDown20.vue';
+import { ChevronDown20 } from '@mozaic-ds/icons-vue';
 /**
  * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
  */

package/src/components/quantityselector/MQuantitySelector.vue

@@ -51,8 +51,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';
-import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
+import { More24, Less24 } from '@mozaic-ds/icons-vue';
 
 /**
  * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.

package/src/components/radio/README.md

@@ -19,3 +19,17 @@ A radio button is a selection control that allows users to choose a single optio
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the radio value changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Used By
+
+- [MRadioGroup](../radiogroup)
+
+### Graph
+
+```mermaid
+graph TD;
+  MRadioGroup --> MRadio
+style MRadio fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/radiogroup/README.md

@@ -19,3 +19,17 @@ A radio button is a selection control that allows users to choose a single optio
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the radio group value changes, updating the modelValue prop. | [value: string] |
+
+## Dependencies
+
+### Depends on
+
+- [MRadio](../radio)
+
+### Graph
+
+```mermaid
+graph TD;
+  MRadioGroup --> MRadio
+style MRadioGroup fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/select/README.md

@@ -22,3 +22,17 @@ A select component allows users to choose a single option from a predefined list
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the select value changes, updating the modelValue prop. | [value: string | number] |
+
+## Dependencies
+
+### Used By
+
+- [MPagination](../pagination)
+
+### Graph
+
+```mermaid
+graph TD;
+  MPagination --> MSelect
+style MSelect fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/starrating/MStarRating.spec.ts

@@ -2,8 +2,7 @@ import { shallowMount, mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import { nextTick } from 'vue';
 import MStarRating from './MStarRating.vue';
-import StarFilled24 from '@mozaic-ds/icons-vue/src/components/StarFilled24/StarFilled24.vue';
-import StarHalf24 from '@mozaic-ds/icons-vue/src/components/StarHalf24/StarHalf24.vue';
+import { StarFilled24, StarHalf24 } from '@mozaic-ds/icons-vue';
 
 function mockRect(el: Element, { left = 0, width = 100 } = {}) {
   Object.defineProperty(el, 'getBoundingClientRect', {

package/src/components/starrating/MStarRating.vue

@@ -56,9 +56,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import Star24 from '@mozaic-ds/icons-vue/src/components/Star24/Star24.vue';
-import StarFilled24 from '@mozaic-ds/icons-vue/src/components/StarFilled24/StarFilled24.vue';
-import StarHalf24 from '@mozaic-ds/icons-vue/src/components/StarHalf24/StarHalf24.vue';
+import { Star24, StarFilled24, StarHalf24 } from '@mozaic-ds/icons-vue';
 
 /**
  * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.

package/src/components/statusbadge/README.md

@@ -9,3 +9,17 @@ A Status Badge is used to indicate the current status of an element, providing a
 | --- | --- | --- | --- | 
 | `label*` | Content of the status badge | `string` | - |
 | `status` | Allows to define the status badge type | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |
+
+## Dependencies
+
+### Depends on
+
+- [MStatusDot](../statusdot)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusBadge --> MStatusDot
+style MStatusBadge fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/statusdot/README.md

@@ -9,3 +9,17 @@ A Status dot is a small visual indicator used to represent the state or conditio
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status dot type. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |
 | `size` | Determines the size of the status dot. | `"s"` `"m"` `"l"` | - |
+
+## Dependencies
+
+### Used By
+
+- [MStatusBadge](../statusbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusBadge --> MStatusDot
+style MStatusDot fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/statusmessage/MStatusMessage.spec.ts

@@ -2,10 +2,12 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MStatusMessage from './MStatusMessage.vue';
 
-import InfoCircleFilled24 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled24/InfoCircleFilled24.vue';
-import WarningCircleFilled24 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled24/WarningCircleFilled24.vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
-import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import {
+  InfoCircleFilled24,
+  WarningCircleFilled24,
+  CrossCircleFilled24,
+  CheckCircleFilled24,
+} from '@mozaic-ds/icons-vue';
 
 describe('MStatusMessage.vue', () => {
   it('renders the label', () => {