@mozaic-ds/vue 2.17.0 → 2.18.0

package/src/components/Migration.mdx

@@ -0,0 +1,651 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Migration Guide" />
+
+# Migration guide
+
+### Components
+
+This document summarizes all component changes between the ADS Vue V1 and V2 design system libraries — including renames, splits, merges, removals, and new additions.
+
+
+#### Mapping Table
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Component</th>
+      <th>V2 Component</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>MAccordion</code></td><td><code>MAccordionList</code> + <code>MAccordionListItem</code></td><td>🔀 Split</td></tr>
+    <tr><td><code>MActionBar</code> + <code>MBottomBar</code></td><td><code>MActionBottomBar</code></td><td>🔗 Merged</td></tr>
+    <tr><td><code>MListBoxActions</code></td><td><code>MActionListBox</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MAvatar</code></td><td>✨ New</td></tr>
+    <tr><td><code>MBreadcrumb</code></td><td><code>MBreadcrumb</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MMenu</code></td><td><code>MBuiltInMenu</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MButton</code></td><td><code>MButton</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MCallout</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MCarousel</code></td><td>✨ New</td></tr>
+    <tr><td><code>MCheckbox</code></td><td><code>MCheckbox</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MCheckboxGroup</code></td><td><code>MCheckboxGroup</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MChecklistMenu</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MCircularProgressBar</code></td><td>✨ New</td></tr>
+    <tr><td><code>MAutocomplete</code> + <code>MDropdown</code></td><td><code>MCombobox</code></td><td>🔗 Merged</td></tr>
+    <tr><td><code>MContainer</code></td><td><code>MContainer</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MDatePicker</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MDivider</code></td><td>✨ New</td></tr>
+    <tr><td><code>MLayer</code></td><td><code>MDrawer</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MField</code></td><td><code>MField</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MFieldGroup</code></td><td>✨ New</td></tr>
+    <tr><td><code>MFileUploader</code></td><td><code>MFileUploader</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MFileUploaderItem</code></td><td>✨ New</td></tr>
+    <tr><td><code>MFlag</code></td><td><code>MFlag</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MIcon</code></td><td><em>removed</em></td><td>🗑️ Removed</td></tr>
+    <tr><td>—</td><td><code>MIconButton</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MKpiItem</code></td><td>✨ New</td></tr>
+    <tr><td><code>MProgress</code></td><td><code>MLinearProgressBarBuffer</code> + <code>MLinearProgressBarPercentage</code></td><td>🔀 Split</td></tr>
+    <tr><td><code>MLink</code></td><td><code>MLink</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MLoader</code></td><td><code>MLoader</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MLoadingOverlay</code></td><td>✨ New</td></tr>
+    <tr><td><code>MModal</code></td><td><code>MModal</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MNavigationIndicator</code></td><td>✨ New</td></tr>
+    <tr><td><code>MNotification</code></td><td><code>MStatusNotification</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MNumberBadge</code></td><td>✨ New</td></tr>
+    <tr><td><code>MListbox</code></td><td><code>MOptionListBox</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MOverlay</code></td><td><code>MOverlay</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MPageHeader</code></td><td>✨ New</td></tr>
+    <tr><td><code>MPagination</code></td><td><code>MPagination</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MPasswordInput</code></td><td><code>MPasswordInput</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MPhoneNumber</code></td><td><code>MPhoneNumber</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MPinCode</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MPopover</code></td><td>✨ New</td></tr>
+    <tr><td><code>MQuantitySelector</code></td><td><code>MQuantitySelector</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MRadio</code></td><td><code>MRadio</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MRadioGroup</code></td><td><code>MRadioGroup</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSegmentedControl</code></td><td><code>MSegmentedControl</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSelect</code></td><td><code>MSelect</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSidebar</code></td><td><code>MSidebar</code> + 6 sub-components</td><td>🔀 Split</td></tr>
+    <tr><td>—</td><td><code>MSidebarExpandableItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarFooter</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarHeader</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarNavItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarShortcutItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarShortcuts</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStarRating</code></td><td>✨ New</td></tr>
+    <tr><td><code>MBadge</code></td><td><code>MStatusBadge</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MStatusDot</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStatusMessage</code></td><td>✨ New</td></tr>
+    <tr><td><code>MStepper</code> (<code>compact: false</code>)</td><td><code>MStepperInline</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MStepper</code> (<code>compact: true</code>)</td><td><code>MStepperCompact</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MStepperBottomBar</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStepperStacked</code></td><td>✨ New</td></tr>
+    <tr><td><code>MTab</code> / <code>MTabsV2</code></td><td><code>MTabs</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MTag</code></td><td><code>MTag</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MTextArea</code></td><td><code>MTextArea</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MTextInput</code></td><td><code>MTextInput</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MTile</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTileClickable</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTileExpandable</code></td><td>✨ New</td></tr>
+    <tr><td><code>MOptionCard</code></td><td><code>MTileSelectable</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MToaster</code></td><td>✨ New</td></tr>
+    <tr><td><code>MToggle</code></td><td><code>MToggle</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MToggleGroup</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTooltip</code></td><td>✨ New</td></tr>
+  </tbody>
+</table>
+
+### Tokens
+
+> V1 used **primitive tokens** — raw color values at each step of a palette scale. V2 uses **semantic/functional tokens** — purpose-driven names that describe the *role* of a color, not its value. V2 primitives are private and not meant to be used directly.
+
+This table maps V1 primitives to their V2 functional equivalents per usage context.
+
+**How to read this table:**
+
+- **Brand** — which brand(s) the V1 token belongs to. `All` = shared across all brands.
+- **Text / Icon** — V2 token to use when the V1 color was applied to text or an icon. Note: `$color-icon-*` tokens alias `$color-text-*` — they resolve to the same value. Use `$color-icon-*` for icon-specific targets when your tool distinguishes them.
+- **Background** — V2 token to use when the V1 color was the fill of a surface or container. `~` indicates a proximity recommendation — the nearest available V2 background token, not an exact color match.
+- **Border** — V2 token to use when the V1 color defined a stroke or outline.
+- **—** — no direct V2 functional equivalent; this shade was intermediate or state-specific (hover, pressed) and is now managed at the component interaction token level.
+
+> All V2 tokens support **light and dark mode**. The values listed below are the light mode defaults. Dark mode is resolved automatically when the correct theme is applied — no manual override needed.
+
+---
+
+#### Brand colors
+
+The accent / brand color palette. **Token name and role differ per brand** — for LM and ADEO, the brand color is `primary-01`. For M Brand, it is `primary-02` (orange). V2 mapping is identical across all brands.
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Token</th>
+      <th>Brand</th>
+      <th>Value</th>
+      <th>Text / Icon</th>
+      <th>Background</th>
+      <th>Border</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>$color-primary-01-100</code></td><td>Leroy Merlin</td><td><code>#EBF5DE</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-200</code></td><td>Leroy Merlin</td><td><code>#C5E39E</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-300</code></td><td>Leroy Merlin</td><td><code>#9ED05F</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-400</code></td><td>Leroy Merlin</td><td><code>#78BE20</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-500</code></td><td>Leroy Merlin</td><td><code>#46A610</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-600</code></td><td>Leroy Merlin</td><td><code>#188803</code></td><td><code>$color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-700</code></td><td>Leroy Merlin</td><td><code>#006902</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-800</code></td><td>Leroy Merlin</td><td><code>#035010</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-900</code></td><td>Leroy Merlin</td><td><code>#023618</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-100</code></td><td>ADEO</td><td><code>#D9F0F3</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-200</code></td><td>ADEO</td><td><code>#91D5DB</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-300</code></td><td>ADEO</td><td><code>#48BAC4</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-400</code></td><td>ADEO</td><td><code>#009EAC</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-500</code></td><td>ADEO</td><td><code>#00919F</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-600</code></td><td>ADEO</td><td><code>#007F8C</code></td><td><code>$color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-700</code></td><td>ADEO</td><td><code>#006974</code></td><td><code>~ $color-icon-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-800</code></td><td>ADEO</td><td><code>#004E57</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-900</code></td><td>ADEO</td><td><code>#002E33</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-100</code></td><td>M Brand</td><td><code>#FFE2BD</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-02-200</code></td><td>M Brand</td><td><code>#FFBF6B</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-02-300</code></td><td>M Brand</td><td><code>#FF941A</code></td><td><code>~ $color-text-accent</code></td><td><code>$color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-400</code></td><td>M Brand</td><td><code>#EF7F00</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-500</code></td><td>M Brand</td><td><code>#E05A00</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-600</code></td><td>M Brand</td><td><code>#C34400</code></td><td><code>$color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-700</code></td><td>M Brand</td><td><code>#943300</code></td><td><code>~ $color-text-accent</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-800</code></td><td>M Brand</td><td><code>#702700</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-900</code></td><td>M Brand</td><td><code>#421700</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+  </tbody>
+</table>
+
+**Notes:**
+- `$color-brand` — the reference brand color. Use when expressing the brand without implying a specific usage context (logo tint, illustration element, etc.).
+- `$color-text-accent` / `$color-icon-accent` — slightly darker, calibrated for contrast as foreground on white.
+- `$color-background-accent` — light tint for subtle branded surfaces (badge background, tinted container). Exact match for LM `100`, ADEO `100`, M Brand `100`.
+- `$color-background-accent-inverse` — filled accent surface for primary CTAs. For LM and ADEO, resolves to the dark end of the scale (800). For **M Brand, resolves to `orange.300`** = `#FF941A` — a mid-orange, not a dark shade. This is an intentional brand difference.
+- `300`, `500`, `700`, `900` (LM / ADEO) and `500`, `700–900` (M Brand) — no V2 equivalent; hover/pressed variations now managed at component interaction token level.
+
+---
+
+#### Secondary colors
+
+Palettes used to complement the brand color — structural surfaces, text hierarchy, borders, and secondary brand expression. Token names differ per brand. For purple and sandgrey, there is no direct V2 functional equivalent — mappings will be handled manually.
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Token</th>
+      <th>Brand</th>
+      <th>Value</th>
+      <th>Text / Icon</th>
+      <th>Background</th>
+      <th>Border</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>$color-primary-02-100</code></td><td>Leroy Merlin</td><td><code>#EEEFF1</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-02-200</code></td><td>Leroy Merlin</td><td><code>#CFD2D8</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>$color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-02-300</code></td><td>Leroy Merlin</td><td><code>#B3B7C1</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-02-400</code></td><td>Leroy Merlin</td><td><code>#8F94A3</code></td><td><code>$color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-500</code></td><td>Leroy Merlin</td><td><code>#6A7081</code></td><td><code>$color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-600</code></td><td>Leroy Merlin</td><td><code>#494F60</code></td><td><code>$color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-02-700</code></td><td>Leroy Merlin</td><td><code>#343B4C</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-800</code></td><td>Leroy Merlin</td><td><code>#242938</code></td><td><code>$color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-02-900</code></td><td>Leroy Merlin</td><td><code>#171B26</code></td><td><code>~ $color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-100</code></td><td>ADEO</td><td><code>#EAEDEF</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-200</code></td><td>ADEO</td><td><code>#CDD4D8</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>$color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-300</code></td><td>ADEO</td><td><code>#B0BBC0</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-400</code></td><td>ADEO</td><td><code>#92A2A9</code></td><td><code>$color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-500</code></td><td>ADEO</td><td><code>#758992</code></td><td><code>$color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-600</code></td><td>ADEO</td><td><code>#5B737D</code></td><td><code>$color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-700</code></td><td>ADEO</td><td><code>#405D68</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-800</code></td><td>ADEO</td><td><code>#264653</code></td><td><code>$color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-blue-900</code></td><td>ADEO</td><td><code>#082435</code></td><td><code>~ $color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-100</code></td><td>ADEO</td><td><code>#E7E7F0</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-200</code></td><td>ADEO</td><td><code>#C5C5DC</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-300</code></td><td>ADEO</td><td><code>#A4A3C7</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-accent</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-400</code></td><td>ADEO</td><td><code>#8281B2</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-500</code></td><td>ADEO</td><td><code>#605F9D</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-600</code></td><td>ADEO</td><td><code>#4B4A8C</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-700</code></td><td>ADEO</td><td><code>#393879</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-800</code></td><td>ADEO</td><td><code>#282863</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-purple-900</code></td><td>ADEO</td><td><code>#1A1A4B</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-accent-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-100</code></td><td>ADEO</td><td><code>#EEEDEA</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-200</code></td><td>ADEO</td><td><code>#DDDCD5</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-300</code></td><td>ADEO</td><td><code>#C2C1BA</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-400</code></td><td>ADEO</td><td><code>#A7A6A0</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-500</code></td><td>ADEO</td><td><code>#8C8B85</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-600</code></td><td>ADEO</td><td><code>#71706B</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-700</code></td><td>ADEO</td><td><code>#555550</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-800</code></td><td>ADEO</td><td><code>#3A3936</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-secondary-sandgrey-900</code></td><td>ADEO</td><td><code>#1E1E1C</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-100</code></td><td>M Brand</td><td><code>#E5EFFF</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-200</code></td><td>M Brand</td><td><code>#B8D3FF</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>$color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-300</code></td><td>M Brand</td><td><code>#8AB7FF</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>~ $color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-primary-01-400</code></td><td>M Brand</td><td><code>#5797FF</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-500</code></td><td>M Brand</td><td><code>#1A6EFF</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-600</code></td><td>M Brand</td><td><code>#0058DB</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-primary-01-700</code></td><td>M Brand</td><td><code>#004EA8</code></td><td><code>~ $color-text-secondary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-800</code></td><td>M Brand</td><td><code>#00387A</code></td><td><code>$color-text-primary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-primary-01-900</code></td><td>M Brand</td><td><code>#002A5B</code></td><td><code>~ $color-text-primary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+  </tbody>
+</table>
+
+**Notes:**
+- `$color-background-secondary` — page backgrounds, alternate rows, section zones. `200` and `300` are proximity recommendations.
+- `$color-border-primary` — default borders for inputs, cards, dividers.
+- `$color-border-secondary` — stronger separation.
+- `$color-border-tertiary` — maximum contrast border, highest elevation edge.
+- `400–500` → `$color-text-tertiary` — captions, metadata, placeholder text, disabled labels.
+- `600` → `$color-text-secondary` — body text, descriptions, supporting content.
+- `700–800` → `$color-text-primary` — headings, primary labels, key content.
+- `$color-background-secondary-inverse` — dark surface for Sidebar, dark panels, inverse zones. For M Brand, the V2 token resolves to `blue.900` = `#001A3D`, darker than V1 `primary-01-900` (`#002A5B`) — `800` and `900` are proximity recommendations.
+- `secondary-purple` and `secondary-sandgrey` — no V2 functional equivalent. To be handled manually.
+
+---
+
+#### Grey scale
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Token</th>
+      <th>Brand</th>
+      <th>Value</th>
+      <th>Text / Icon</th>
+      <th>Background</th>
+      <th>Border</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>$color-grey-000</code></td><td>All</td><td><code>#FFFFFF</code></td><td><code>$color-text-primary-inverse</code></td><td><code>$color-background-primary</code></td><td><code>$color-border-inverse</code></td></tr>
+    <tr><td><code>$color-grey-100</code></td><td>All</td><td><code>#E6E6E6</code></td><td><code>$color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-grey-200</code></td><td>All</td><td><code>#CCCCCC</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>$color-border-primary</code></td></tr>
+    <tr><td><code>$color-grey-300</code></td><td>All</td><td><code>#B3B3B3</code></td><td><code>~ $color-text-secondary-inverse</code></td><td><code>$color-background-secondary</code></td><td><code>~ $color-border-primary</code></td></tr>
+    <tr><td><code>$color-grey-400</code></td><td>All</td><td><code>#999999</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary</code></td><td><code>$color-border-secondary</code></td></tr>
+    <tr><td><code>$color-grey-500</code></td><td>All</td><td><code>#808080</code></td><td><code>~ $color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-grey-600</code></td><td>All</td><td><code>#666666</code></td><td><code>$color-text-tertiary</code></td><td><code>~ $color-background-secondary-inverse</code></td><td><code>~ $color-border-secondary</code></td></tr>
+    <tr><td><code>$color-grey-700</code></td><td>All</td><td><code>#4D4D4D</code></td><td><code>~ $color-text-secondary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-grey-800</code></td><td>All</td><td><code>#333333</code></td><td><code>~ $color-text-secondary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>$color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-grey-900</code></td><td>All</td><td><code>#191919</code></td><td><code>~ $color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+    <tr><td><code>$color-grey-999</code></td><td>All</td><td><code>#000000</code></td><td><code>$color-text-primary</code></td><td><code>$color-background-secondary-inverse</code></td><td><code>~ $color-border-tertiary</code></td></tr>
+  </tbody>
+</table>
+
+**Notes:**
+- `$color-background-primary` — pure white surface. Exact match to `grey-000`.
+- `$color-background-disabled` = `neutral.grey.150` — lighter than `grey-100` and `grey-200`. Closest available V2 background for light grey fills; primarily intended for disabled component surfaces.
+- `$color-text-primary-inverse` / `$color-icon-primary-inverse` — white text on dark surfaces. Exact match to `grey-000`.
+- `$color-text-secondary-inverse` / `$color-icon-secondary-inverse` — close to `grey-100`. Text on dark inverse backgrounds.
+- `$color-text-disabled` / `$color-icon-disabled` — between `grey-500` and `grey-600`. Closest V2 token for mid-grey disabled content.
+- `$color-text-tertiary` / `$color-icon-tertiary` — exact match to `grey-600` (#666).
+- `$color-text-secondary` / `$color-icon-secondary` ≈ `#404040` — darker than `grey-700` (#4D4D4D) and `grey-800` (#333). Both map here as the nearest available.
+- `$color-text-primary` / `$color-icon-primary` ≈ near-black. Exact match to `grey-999` (#000). `grey-900` (#191919) maps here as the nearest available.
+
+---
+
+#### Status colors
+
+> **Naming change:** V1 used `danger` — V2 uses `error`. All other status names are unchanged (info, warning, success).
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Token</th>
+      <th>Brand</th>
+      <th>Value</th>
+      <th>Text / Icon</th>
+      <th>Background</th>
+      <th>Border</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>$color-danger-100</code></td><td>All</td><td><code>#FDEAEA</code></td><td><code>~ $color-status-text-error</code></td><td><code>$color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-200</code></td><td>All</td><td><code>#F8BCBB</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-300</code></td><td>All</td><td><code>#F38D8C</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-400</code></td><td>All</td><td><code>#EF5F5C</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>$color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-500</code></td><td>All</td><td><code>#EA302D</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-600</code></td><td>All</td><td><code>#C61112</code></td><td><code>$color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-700</code></td><td>All</td><td><code>#8C0003</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-800</code></td><td>All</td><td><code>#530000</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-danger-900</code></td><td>All</td><td><code>#2D0000</code></td><td><code>~ $color-status-text-error</code></td><td><code>~ $color-status-background-error</code></td><td><code>~ $color-status-border-error</code></td></tr>
+    <tr><td><code>$color-info-100</code></td><td>All</td><td><code>#DAEFF7</code></td><td><code>~ $color-status-text-info</code></td><td><code>$color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-200</code></td><td>All</td><td><code>#A7D9ED</code></td><td><code>~ $color-status-text-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-300</code></td><td>All</td><td><code>#73C3E2</code></td><td><code>~ $color-status-standalone-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-400</code></td><td>All</td><td><code>#3FACD7</code></td><td><code>~ $color-status-standalone-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>$color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-500</code></td><td>All</td><td><code>#0B96CC</code></td><td><code>$color-status-standalone-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-600</code></td><td>All</td><td><code>#007BB4</code></td><td><code>~ $color-status-text-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-700</code></td><td>All</td><td><code>#005C91</code></td><td><code>~ $color-status-text-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-800</code></td><td>All</td><td><code>#003A5C</code></td><td><code>~ $color-status-text-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-info-900</code></td><td>All</td><td><code>#002A41</code></td><td><code>~ $color-status-text-info</code></td><td><code>~ $color-status-background-info</code></td><td><code>~ $color-status-border-info</code></td></tr>
+    <tr><td><code>$color-warning-100</code></td><td>All</td><td><code>#FDF1E8</code></td><td><code>~ $color-status-text-warning</code></td><td><code>$color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-200</code></td><td>All</td><td><code>#F8D2B3</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-300</code></td><td>All</td><td><code>#F4B27E</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-400</code></td><td>All</td><td><code>#EF934A</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>$color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-500</code></td><td>All</td><td><code>#EA7315</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-600</code></td><td>All</td><td><code>#C65200</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-700</code></td><td>All</td><td><code>#8C3500</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-800</code></td><td>All</td><td><code>#531B00</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-warning-900</code></td><td>All</td><td><code>#360E00</code></td><td><code>~ $color-status-text-warning</code></td><td><code>~ $color-status-background-warning</code></td><td><code>~ $color-status-border-warning</code></td></tr>
+    <tr><td><code>$color-success-100</code></td><td>All</td><td><code>#EBF5DE</code></td><td><code>~ $color-status-text-success</code></td><td><code>$color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-200</code></td><td>All</td><td><code>#C5E39E</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-300</code></td><td>All</td><td><code>#9ED05F</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-400</code></td><td>All</td><td><code>#78BE20</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>$color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-500</code></td><td>All</td><td><code>#46A610</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-600</code></td><td>All</td><td><code>#188803</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-700</code></td><td>All</td><td><code>#006902</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-800</code></td><td>All</td><td><code>#035010</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+    <tr><td><code>$color-success-900</code></td><td>All</td><td><code>#023618</code></td><td><code>~ $color-status-text-success</code></td><td><code>~ $color-status-background-success</code></td><td><code>~ $color-status-border-success</code></td></tr>
+  </tbody>
+</table>
+
+**Notes:**
+- `100` → exact match to the V2 background token (light tint for notification containers, form error zones).
+- `200` → proximity to the background tint; no intermediate background token exists in V2.
+- `400` → exact border token level. `300` is a proximity recommendation.
+- `500` → exact standalone icon level — the saturated shade designed to read without text support (Status Dot, badge icons).
+- `600` → text/foreground level. `danger` and `success` are exact matches. `info` (`#007BB4` vs V2 `#0074AA`) and `warning` (`#C65200` vs V2 `#B64F00`) are proximity recommendations — marked `~`.
+- `700–900` — no V2 functional equivalent. Hover/pressed states now managed at component interaction token level. Dark mode inversions handled automatically by the V2 token system.
+
+
+### Icons
+
+This document outlines the equivalences between icon names in Version 1 and Version 2 of the Adeo Design System.
+Entries with no corresponding entries have been excluded to retain only usable mappings.
+
+<table>
+  <thead>
+    <tr>
+      <th>V1</th>
+      <th>V2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>Laptop</td><td>DeviceLaptop</td></tr>
+    <tr><td>Mobile</td><td>DeviceMobile</td></tr>
+    <tr><td>Tablet</td><td>DeviceTablet</td></tr>
+    <tr><td>HygienePlexiglas</td><td>Glass</td></tr>
+    <tr><td>HygieneMask</td><td>Mask</td></tr>
+    <tr><td>HygieneGel</td><td>HandSanitiser</td></tr>
+    <tr><td>HygieneDistance</td><td>Distance</td></tr>
+    <tr><td>HygieneCleaned</td><td>CleaningProduct</td></tr>
+    <tr><td>PaymentCheckout</td><td>Checkout</td></tr>
+    <tr><td>Print</td><td>Print</td></tr>
+    <tr><td>Project</td><td>Project</td></tr>
+    <tr><td>Pushpin</td><td>PushPin</td></tr>
+    <tr><td>Read</td><td>Book</td></tr>
+    <tr><td>ReduceScreen</td><td>FullscreenExit</td></tr>
+    <tr><td>Release</td><td>Release</td></tr>
+    <tr><td>Stop</td><td>Pause</td></tr>
+    <tr><td>Slideshow</td><td>Slideshow</td></tr>
+    <tr><td>Sound</td><td>VolumeOn</td></tr>
+    <tr><td>TimeRead</td><td>Time</td></tr>
+    <tr><td>Upload</td><td>Upload</td></tr>
+    <tr><td>View360</td><td>View360</td></tr>
+    <tr><td>Policies</td><td>Policies</td></tr>
+    <tr><td>Server</td><td>Server</td></tr>
+    <tr><td>Pushpinoff</td><td>PushPinOff</td></tr>
+    <tr><td>Picker</td><td>Picker</td></tr>
+    <tr><td>Play</td><td>Play</td></tr>
+    <tr><td>BookStore</td><td>Newspaper</td></tr>
+    <tr><td>Camera</td><td>Camera</td></tr>
+    <tr><td>Code</td><td>Code</td></tr>
+    <tr><td>Document</td><td>Document</td></tr>
+    <tr><td>DownloadApp</td><td>Download</td></tr>
+    <tr><td>DownloadWeb</td><td>Download</td></tr>
+    <tr><td>API</td><td>Api</td></tr>
+    <tr><td>Gauge</td><td>Gauge</td></tr>
+    <tr><td>Group</td><td>Group</td></tr>
+    <tr><td>Media_Image</td><td>Image</td></tr>
+    <tr><td>Imagealt</td><td>ImageAlt</td></tr>
+    <tr><td>NoPicture</td><td>NoPicture</td></tr>
+    <tr><td>FullScreen</td><td>FullscreenEnter</td></tr>
+    <tr><td>Pdf</td><td>FilePdf</td></tr>
+    <tr><td>DisplaySearchProduct</td><td>SearchProduct</td></tr>
+    <tr><td>DisplaySearchList</td><td>SearchList</td></tr>
+    <tr><td>DisplaySearch</td><td>Search</td></tr>
+    <tr><td>DisplayScreenRotation</td><td>ScreenRotation</td></tr>
+    <tr><td>DisplayRefresh</td><td>Refresh</td></tr>
+    <tr><td>DisplayProductNumb</td><td>ListView</td></tr>
+    <tr><td>DisplayMovingBlock</td><td>Drag</td></tr>
+    <tr><td>DisplayOptions</td><td>OptionsVertical</td></tr>
+    <tr><td>DisplayMenu</td><td>Menu</td></tr>
+    <tr><td>DisplayLogOut</td><td>LogOut</td></tr>
+    <tr><td>DisplayHome</td><td>Home</td></tr>
+    <tr><td>DisplaySetting</td><td>Settings</td></tr>
+    <tr><td>DisplayFilter</td><td>Filter</td></tr>
+    <tr><td>DisplayOther</td><td>OptionsHorizontal</td></tr>
+    <tr><td>DisplayView</td><td>Eye</td></tr>
+    <tr><td>PublishCopy</td><td>Copy</td></tr>
+    <tr><td>NotificationAvailable</td><td>Check</td></tr>
+    <tr><td>NotificationBell</td><td>Notification</td></tr>
+    <tr><td>NotificationCircleAvailable</td><td>CheckCircle</td></tr>
+    <tr><td>NotificationInformation</td><td>InfoCircle</td></tr>
+    <tr><td>NotificationQuestion</td><td>HelpCircle</td></tr>
+    <tr><td>NotificationWarning</td><td>WarningCircle</td></tr>
+    <tr><td>PublishEdit</td><td>Edit</td></tr>
+    <tr><td>PublishFavorite</td><td>Favorite</td></tr>
+    <tr><td>PublishFavoriteFull</td><td>FavoriFilled</td></tr>
+    <tr><td>PublishLock</td><td>Lock</td></tr>
+    <tr><td>PublishSend</td><td>Send</td></tr>
+    <tr><td>PublishTrashbin</td><td>Trash</td></tr>
+    <tr><td>Split</td><td>Split</td></tr>
+    <tr><td>DisplayExternalLink</td><td>ExternalLink</td></tr>
+    <tr><td>DisplayVocalSearch</td><td>Mic</td></tr>
+    <tr><td>DisplayDisplayProductX9</td><td>ViewGridX9</td></tr>
+    <tr><td>ControlCircleMore</td><td>MoreCircle</td></tr>
+    <tr><td>DisplayDisplayProductX4Filled</td><td>ViewGridX4Filled</td></tr>
+    <tr><td>ArrowArrowBottom</td><td>ChevronDown</td></tr>
+    <tr><td>ArrowArrowLeft</td><td>ChevronLeft</td></tr>
+    <tr><td>ArrowArrowRight</td><td>ChevronRight</td></tr>
+    <tr><td>ArrowArrowTop</td><td>ChevronUp</td></tr>
+    <tr><td>ArrowArrowBottomLeft</td><td>ArrowBottomLeft</td></tr>
+    <tr><td>DisplayDisplayProductX4Outline</td><td>ViewGridX4</td></tr>
+    <tr><td>ArrowArrowTopLeft</td><td>ArrowTopLeft</td></tr>
+    <tr><td>ArrowArrowTopRight</td><td>ArrowTopLeft</td></tr>
+    <tr><td>ArrowBack</td><td>ArrowBack</td></tr>
+    <tr><td>ArrowDown</td><td>ArrowBottom</td></tr>
+    <tr><td>ArrowNext</td><td>ArrowNext</td></tr>
+    <tr><td>ArrowUp</td><td>ArrowTop</td></tr>
+    <tr><td>ControlCircleCross</td><td>CrossCircle</td></tr>
+    <tr><td>ArrowArrowBottomRight</td><td>ArrowBottomRight</td></tr>
+    <tr><td>DisplayDisplayMobileVertical</td><td>ViewLarge</td></tr>
+    <tr><td>DisplayDisplayMobileHorizontal</td><td>ViewCompact</td></tr>
+    <tr><td>DisplayDisplayListOutline</td><td>ViewList</td></tr>
+    <tr><td>DisplayDisplayListFilled</td><td>ViewListFilled</td></tr>
+    <tr><td>ControlCircleLess</td><td>LessCircle</td></tr>
+    <tr><td>DisplayDisplayFullFilled</td><td>ViewGridX1Filled</td></tr>
+    <tr><td>DisplayConnect</td><td>Connect</td></tr>
+    <tr><td>DisplayDisplayFullOutline</td><td>ViewGridX1</td></tr>
+    <tr><td>DisplayBlink</td><td>FlashingLight</td></tr>
+    <tr><td>ControlTagCross</td><td>CrossCircleFilled</td></tr>
+    <tr><td>ControlMore</td><td>More</td></tr>
+    <tr><td>ControlLess</td><td>Less</td></tr>
+    <tr><td>ControlCross</td><td>Cross</td></tr>
+    <tr><td>DisplayCalendar</td><td>Calendar</td></tr>
+    <tr><td>Zloty</td><td>Zloty</td></tr>
+    <tr><td>Transfer</td><td>Transfer</td></tr>
+    <tr><td>SafePayment2</td><td>SecurePaymentAlt</td></tr>
+    <tr><td>SafePayment1</td><td>SecurePayment</td></tr>
+    <tr><td>Receipt</td><td>ReceiptEuro</td></tr>
+    <tr><td>Euro</td><td>Euro</td></tr>
+    <tr><td>DetailsOrder</td><td>Checkout</td></tr>
+    <tr><td>Bill</td><td>BillEuro</td></tr>
+    <tr><td>Billzloty</td><td>BillZloty</td></tr>
+    <tr><td>Receiptzloty</td><td>ReceiptZloty</td></tr>
+    <tr><td>PromiseMadeInEurope</td><td>Europe</td></tr>
+    <tr><td>PromiseFashionChoice</td><td>Pantone</td></tr>
+    <tr><td>PromiseFunding</td><td>FundingEuro</td></tr>
+    <tr><td>PromiseMadeInFrance</td><td>France</td></tr>
+    <tr><td>PromiseEcoProduct</td><td>Eco</td></tr>
+    <tr><td>PromiseProductOnPicture</td><td>PriceTag</td></tr>
+    <tr><td>PromiseProductSheet</td><td>List</td></tr>
+    <tr><td>PromiseScan</td><td>BarcodeScanner</td></tr>
+    <tr><td>Trolley</td><td>Trolley</td></tr>
+    <tr><td>PromiseModular</td><td>Modular</td></tr>
+    <tr><td>PromiseDestocking</td><td>Discount</td></tr>
+    <tr><td>PromiseWarranty</td><td>Warranty</td></tr>
+    <tr><td>PromiseCertification</td><td>Certification</td></tr>
+    <tr><td>ListStandard</td><td>List</td></tr>
+    <tr><td>ListAdd</td><td>ListAdd</td></tr>
+    <tr><td>BasketStandard</td><td>Cart</td></tr>
+    <tr><td>BasketSave</td><td>Cart</td></tr>
+    <tr><td>BasketMulti</td><td>Cart</td></tr>
+    <tr><td>BasketHandbag</td><td>Handbag</td></tr>
+    <tr><td>BasketAdd</td><td>Cart</td></tr>
+    <tr><td>AspectWeight</td><td>Weight</td></tr>
+    <tr><td>AspectSize</td><td>Size</td></tr>
+    <tr><td>PromiseCircularEconomy</td><td>CircularEconomy</td></tr>
+    <tr><td>AspectQuantity</td><td>Layers</td></tr>
+    <tr><td>Inspiration</td><td>Image</td></tr>
+    <tr><td>MakeProject</td><td>Draw</td></tr>
+    <tr><td>DescribeProject</td><td>DiyAlt</td></tr>
+    <tr><td>Fundingzloty</td><td>FundingZloty</td></tr>
+    <tr><td>ToolsComparator</td><td>Comparator</td></tr>
+    <tr><td>ToolsCalculator</td><td>Calculator</td></tr>
+    <tr><td>Tools3d</td><td>View3d</td></tr>
+    <tr><td>TimeTimeDecline</td><td>Timer</td></tr>
+    <tr><td>Service_Time_Delivery--48h</td><td>Timer48h</td></tr>
+    <tr><td>TimeDelivery3h</td><td>Timer3h</td></tr>
+    <tr><td>TimeDelivery2h</td><td>Timer2h</td></tr>
+    <tr><td>TimeDelivery24h</td><td>business_timer-24h</td></tr>
+    <tr><td>PurchaseHelpToolRent</td><td>ToolRental</td></tr>
+    <tr><td>PurchaseHelpHomeInstall</td><td>Renovation</td></tr>
+    <tr><td>PurchaseHelpHomeDIY</td><td>HardHat</td></tr>
+    <tr><td>Pallet</td><td>Pallet</td></tr>
+    <tr><td>DeliveryDeliveryHome</td><td>Delivery</td></tr>
+    <tr><td>DeliveryDeliveryPickupRelayPoint</td><td>Package</td></tr>
+    <tr><td>AfterSalesAfterSalesService</td><td>Wrench</td></tr>
+    <tr><td>DeliveryDeliveryPickupStore</td><td>Pickup</td></tr>
+    <tr><td>AfterSalesPayback</td><td>Return</td></tr>
+    <tr><td>AfterSalesSatisfaction</td><td>FeelingSatisfied</td></tr>
+    <tr><td>CustomCopyKey</td><td>Key</td></tr>
+    <tr><td>AfterSalesHelpline</td><td>Helpline</td></tr>
+    <tr><td>CustomCutWoodGlass</td><td>CuttingWoodGlass</td></tr>
+    <tr><td>CustomSample</td><td>Sample</td></tr>
+    <tr><td>CustomSharpening</td><td>Sharpening</td></tr>
+    <tr><td>DeliveryDeliveryLocker</td><td>Locker</td></tr>
+    <tr><td>CustomCourse</td><td>Course</td></tr>
+    <tr><td>SocialNetworkTiktok</td><td>SocialTiktok</td></tr>
+    <tr><td>ViewTesterView</td><td>Admin</td></tr>
+    <tr><td>ViewStarHalf</td><td>StarHalf</td></tr>
+    <tr><td>ViewStarFull</td><td>StarFilled</td></tr>
+    <tr><td>ViewStarEmpty</td><td>Star</td></tr>
+    <tr><td>ViewLikePositive</td><td>ThumbUp</td></tr>
+    <tr><td>ViewLikeNegative</td><td>ThumbDown</td></tr>
+    <tr><td>SocialNetworkYoutube</td><td>SocialYoutube</td></tr>
+    <tr><td>SocialNetworkX</td><td>SocialX</td></tr>
+    <tr><td>SocialNetworkTelegram</td><td>SocialTelegram</td></tr>
+    <tr><td>ShareShareIOS</td><td>ShareIos</td></tr>
+    <tr><td>SocialNetworkPinterest</td><td>SocialPinterest</td></tr>
+    <tr><td>SocialNetworkLinkedin</td><td>SocialLinkedin</td></tr>
+    <tr><td>SocialNetworkInstagram</td><td>SocialInstagram</td></tr>
+    <tr><td>SocialNetworkFacebook</td><td>SocialFacebook</td></tr>
+    <tr><td>SocialNetworkSpotify</td><td>SocialSpotify</td></tr>
+    <tr><td>ShareShareAndroid</td><td>Share</td></tr>
+    <tr><td>CommentReport</td><td>Report</td></tr>
+    <tr><td>CommentQuestionArticle</td><td>Question</td></tr>
+    <tr><td>CommentCommunity</td><td>Chat</td></tr>
+    <tr><td>CommentComment</td><td>Comment</td></tr>
+    <tr><td>StoreLM</td><td>StoreLeroymerlin</td></tr>
+    <tr><td>StoreBM</td><td>StoreBricoman</td></tr>
+    <tr><td>MonochromeStoreLocation</td><td>StoreLocationLm</td></tr>
+    <tr><td>MonochromeStoreLocationbm</td><td>StoreLocationBm</td></tr>
+    <tr><td>MonochromeRelayLocation</td><td>PickupLocation</td></tr>
+    <tr><td>Map</td><td>Map</td></tr>
+    <tr><td>Logo</td><td>LeroyMerlin</td></tr>
+    <tr><td>Locator</td><td>Locator</td></tr>
+    <tr><td>Itinerary</td><td>Direction</td></tr>
+    <tr><td>Leak</td><td>Leak</td></tr>
+    <tr><td>Kitchen2</td><td>Kitchen</td></tr>
+    <tr><td>Lighting</td><td>Lighting</td></tr>
+    <tr><td>Living</td><td>LivingRoom</td></tr>
+    <tr><td>MakeIt</td><td>product</td></tr>
+    <tr><td>Masonryalt</td><td>MasonryAlt</td></tr>
+    <tr><td>Mixertruck</td><td>MixerTruck</td></tr>
+    <tr><td>Paint</td><td>Paint</td></tr>
+    <tr><td>Pool</td><td>Pool</td></tr>
+    <tr><td>Renewableenergy</td><td>RenewableEnergy</td></tr>
+    <tr><td>Woodflooring</td><td>WoodFlooring</td></tr>
+    <tr><td>Stairs</td><td>Stairs</td></tr>
+    <tr><td>Terrace</td><td>Terrace</td></tr>
+    <tr><td>WoodSaw</td><td>WoodSaw</td></tr>
+    <tr><td>Tool</td><td>Drill</td></tr>
+    <tr><td>Ventilation</td><td>Ventilation</td></tr>
+    <tr><td>Wallpaper</td><td>Wallpaper</td></tr>
+    <tr><td>Window</td><td>Window</td></tr>
+    <tr><td>Woodflooringalt</td><td>WoodFlooringAlt</td></tr>
+    <tr><td>Wood</td><td>Wood</td></tr>
+    <tr><td>Kitchen</td><td>Faucet</td></tr>
+    <tr><td>Security</td><td>Security</td></tr>
+    <tr><td>Kitchenalt</td><td>KitchenAlt</td></tr>
+    <tr><td>Curtains</td><td>Curtains</td></tr>
+    <tr><td>Insulationalt</td><td>InsulationAlt</td></tr>
+    <tr><td>Attic</td><td>Attic</td></tr>
+    <tr><td>Bathroom</td><td>Bathroom</td></tr>
+    <tr><td>Bedroom</td><td>Bedroom</td></tr>
+    <tr><td>Bigbag</td><td>BigBag</td></tr>
+    <tr><td>Carpentry</td><td>Masonry</td></tr>
+    <tr><td>ChristmasTree</td><td>ChristmasTree</td></tr>
+    <tr><td>Kids</td><td>Kids</td></tr>
+    <tr><td>Dressing</td><td>Dressing</td></tr>
+    <tr><td>Drillalt</td><td>DrillAlt</td></tr>
+    <tr><td>Electricity</td><td>Electricity</td></tr>
+    <tr><td>ConnectedHome</td><td>ConnectedHome</td></tr>
+    <tr><td>Floor</td><td>Floor</td></tr>
+    <tr><td>Enki</td><td>Enki</td></tr>
+    <tr><td>HardwareStore</td><td>Hardware</td></tr>
+    <tr><td>Hardhatalt</td><td>HardHatAlt</td></tr>
+    <tr><td>Glass</td><td>Glass</td></tr>
+    <tr><td>Heater</td><td>Heater</td></tr>
+    <tr><td>Garden1</td><td>Barbecue</td></tr>
+    <tr><td>Garden</td><td>Garden</td></tr>
+    <tr><td>Garage</td><td>Garage</td></tr>
+    <tr><td>Garden2</td><td>GardenAlt</td></tr>
+    <tr><td>SituationTenant</td><td>Tenant</td></tr>
+    <tr><td>SituationOwner</td><td>Owner</td></tr>
+    <tr><td>ContactWebsite</td><td>Worldwide</td></tr>
+    <tr><td>ContactPhone</td><td>Phone</td></tr>
+    <tr><td>ContactMail</td><td>Mail</td></tr>
+    <tr><td>CardLoyaltyCard</td><td>LoyaltyLm</td></tr>
+    <tr><td>CardLoyaltym</td><td>LoyaltyBm</td></tr>
+    <tr><td>CardGift</td><td>Gift</td></tr>
+    <tr><td>CardIDCard</td><td>IdCard</td></tr>
+    <tr><td>CardFundingzloty</td><td>FundingZloty</td></tr>
+    <tr><td>AccountProfileWoman</td><td>Woman</td></tr>
+    <tr><td>AccountProfileView</td><td>Profile</td></tr>
+    <tr><td>AccountProfileMan</td><td>Man</td></tr>
+    <tr><td>AccountCustomerPro</td><td>ProfilePro</td></tr>
+    <tr><td>AccountCustomerPassion</td><td>ProfilePassion</td></tr>
+    <tr><td>AccountCustomerCollaborator</td><td>ProfileCollaborator</td></tr>
+    <tr><td>CardFunding</td><td>FundingEuro</td></tr>
+    <tr><td>Level</td><td>Hammer</td></tr>
+    <tr><td>PaintCan</td><td>PaintCan</td></tr>
+    <tr><td>PartnerCompany</td><td>Partnership</td></tr>
+    <tr><td>PartnerWorker</td><td>Craftsman</td></tr>
+    <tr><td>Shutter</td><td>Shutter</td></tr>
+    <tr><td>Premium</td><td>Premium</td></tr>
+    <tr><td>LessonDIY</td><td>Diy</td></tr>
+    <tr><td>Survey</td><td>Survey</td></tr>
+    <tr><td>Temperature</td><td>Temperature</td></tr>
+    <tr><td>Pipe</td><td>Pipe</td></tr>
+    <tr><td>Insulation</td><td>Insulation</td></tr>
+    <tr><td>EcoSaving</td><td>EcoAlt</td></tr>
+    <tr><td>House</td><td>House</td></tr>
+    <tr><td>Heat</td><td>Heater</td></tr>
+    <tr><td>Door</td><td>Door</td></tr>
+    <tr><td>Company</td><td>Company</td></tr>
+    <tr><td>Blower</td><td>product_ventilation</td></tr>
+    <tr><td>Balcony</td><td>Balcony</td></tr>
+    <tr><td>Apartment</td><td>Apartment</td></tr>
+    <tr><td>Administration</td><td>Administration</td></tr>
+    <tr><td>A11y</td><td>A11y</td></tr>
+    <tr><td>ThermalControl</td><td>Thermostat</td></tr>
+    <tr><td>IncreaseValue</td><td>Data</td></tr>
+    <tr><td>ToolBox</td><td>Toolbox</td></tr>
+  </tbody>
+</table>
+