@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/this.js

@@ -1,2 +1,2 @@
-import{M as h,aB as k,q,a5 as B,aD as M}from"./custom-element.js";function u(r,i){return r===i||r?.[M]===i}function T(r={},i,f,b){return h(()=>{var a,s;return k(()=>{a=s,s=b?.()||[],q(()=>{r!==f(...s)&&(i(r,...s),a&&u(f(...a),r)&&i(null,...a))})}),()=>{B(()=>{s&&u(f(...s),r)&&i(null,...s)})}}),r}export{T as b};
+import{V as d,ax as h,aw as k,ad as x,aA as A}from"./custom-element.js";function u(r,a){return r===a||r?.[A]===a}function T(r={},a,f,b){return d(()=>{var i,s;return h(()=>{i=s,s=b?.()||[],k(()=>{r!==f(...s)&&(a(r,...s),i&&u(f(...i),r)&&a(null,...i))})}),()=>{x(()=>{s&&u(f(...s),r)&&a(null,...s)})}}),r}export{T as b};
 //# sourceMappingURL=this.js.map

package/dist/this.js.map

@@ -1 +1 @@
-{"version":3,"file":"this.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task"],"mappings":"kEAUA,SAASA,EAAcC,EAAaC,EAAsB,CACzD,OACCD,IAAgBC,GAAwBD,IAAcE,CAAY,IAAMD,CAE1E,CAUO,SAASE,EAAUF,EAAuB,CAAA,EAAIG,EAAQC,EAAWC,EAAW,CAClF,OAAAC,EAAO,IAAM,CAEZ,IAAIC,EAGAC,EAEJ,OAAAC,EAAc,IAAM,CACnBF,EAAYC,EAEZA,EAAQH,IAAS,GAAQ,CAAA,EAEzBK,EAAQ,IAAM,CACTV,IAAyBI,EAAU,GAAGI,CAAK,IAC9CL,EAAOH,EAAsB,GAAGQ,CAAK,EAGjCD,GAAaT,EAAcM,EAAU,GAAGG,CAAS,EAAGP,CAAoB,GAC3EG,EAAO,KAAM,GAAGI,CAAS,EAG5B,CAAC,CACF,CAAC,EAEM,IAAM,CAEZI,EAAiB,IAAM,CAClBH,GAASV,EAAcM,EAAU,GAAGI,CAAK,EAAGR,CAAoB,GACnEG,EAAO,KAAM,GAAGK,CAAK,CAEvB,CAAC,CACF,CACD,CAAC,EAEMR,CACR","x_google_ignoreList":[0]}
+{"version":3,"file":"this.js","sources":["../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullify the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task"],"mappings":"wEAUA,SAASA,EAAcC,EAAaC,EAAsB,CACzD,OACCD,IAAgBC,GAAwBD,IAAcE,CAAY,IAAMD,CAE1E,CAUO,SAASE,EAAUF,EAAuB,CAAA,EAAIG,EAAQC,EAAWC,EAAW,CAClF,OAAAC,EAAO,IAAM,CAEZ,IAAIC,EAGAC,EAEJ,OAAAC,EAAc,IAAM,CACnBF,EAAYC,EAEZA,EAAQH,IAAS,GAAQ,CAAA,EAEzBK,EAAQ,IAAM,CACTV,IAAyBI,EAAU,GAAGI,CAAK,IAC9CL,EAAOH,EAAsB,GAAGQ,CAAK,EAGjCD,GAAaT,EAAcM,EAAU,GAAGG,CAAS,EAAGP,CAAoB,GAC3EG,EAAO,KAAM,GAAGI,CAAS,EAG5B,CAAC,CACF,CAAC,EAEM,IAAM,CAEZI,EAAiB,IAAM,CAClBH,GAASV,EAAcM,EAAU,GAAGI,CAAK,EAAGR,CAAoB,GACnEG,EAAO,KAAM,GAAGK,CAAK,CAEvB,CAAC,CACF,CACD,CAAC,EAEMR,CACR","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/web-components",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Web component Mozaic DS implementation",
   "license": "MIT",
   "engines": {
@@ -30,16 +30,16 @@
     "build": "vite build",
     "watch": "vite build --watch",
     "build:svelte": "svelte-package --input src/",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'css_unused_selector:ignore,custom_element_props_identifier:ignore'",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
+    "lint": "eslint . --fix",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run",
     "clean": "rm -rf dist/",
     "start": "npm-run-all --parallel watch storybook",
-    "build:storybook": "npm run build && storybook build --stats-json",
-    "build-storybook": "npm run build:storybook",
+    "build:storybook": "npm run build-storybook",
+    "build-storybook": "storybook build",
     "build:lib": "npm run clean && npm run build:svelte && npm run build",
     "storybook": "storybook dev -p 6006",
     "docs": "node generate-docs.js",
@@ -54,22 +54,22 @@
     "npm:publishAlpha": "npm publish --tag alpha --access dist"
   },
   "dependencies": {
-    "@mozaic-ds/icons-svelte": "1.1.0",
-    "@mozaic-ds/styles": "^2.5.0",
-    "@mozaic-ds/tokens": "^2.5.0",
+    "@mozaic-ds/icons-svelte": "^2.3.1",
+    "@mozaic-ds/styles": "^2.6.0",
     "@mozaic-ds/web-fonts": "1.65.0",
+    "libphonenumber-js": "^1.12.31",
     "svelte": "^5.38.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/compat": "^1.4.0",
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.38.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@storybook/addon-a11y": "^9.1.5",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.5",
+    "@release-it/conventional-changelog": "10.0.1",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-themes": "^10.1.4",
+    "@storybook/web-components-vite": "^10.1.4",
     "@sveltejs/kit": "^2.20.8",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -79,9 +79,9 @@
     "@vitest/coverage-v8": "^4.0.7",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-storybook": "^10.1.4",
     "eslint-plugin-svelte": "^3.12.5",
-    "glob": "^11.0.3",
+    "glob": "^13.0.0",
     "husky": "^9.1.7",
     "jsdom": "^27.0.0",
     "lint-staged": "^16.2.6",
@@ -90,10 +90,10 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "release-it": "^19.0.5",
-    "sass": "^1.85.1",
-    "storybook": "^9.1.5",
-    "storybook-addon-tag-badges": "^2.0.2",
+    "release-it": "^19.2.4",
+    "sass": "1.94.2",
+    "storybook": "^10.1.4",
+    "storybook-addon-tag-badges": "^3.0.2",
     "svelte-check": "^4.1.4",
     "svelte-loader": "^3.2.3",
     "typescript": "^5.5.0",

package/dist/Cross20.js

@@ -1,2 +0,0 @@
-import{c as g,p as v,b as s,z as h,t as o,i as w,j as z,k as i,e as x,g as y}from"./custom-element.js";import"./legacy.js";import{s as u,a as N}from"./attributes.js";var C=h('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z"></path></svg>');function L(m,l){v(l,!1);let a=s(l,"id",12,void 0),d=s(l,"style",12,void 0),n=s(l,"className",12,void 0),r=s(l,"fill",12,void 0),f=s(l,"size",12,"2rem");var c={get id(){return a()},set id(e){a(e),i()},get style(){return d()},set style(e){d(e),i()},get className(){return n()},set className(e){n(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return f()},set size(e){f(e),i()}},t=C();return o(()=>{u(t,"id",a()),N(t,d()),x(t,0,y(n())),u(t,"fill",r())}),w(m,t),z(c)}customElements.define("info-circle-filled-32",g(L,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var _=h('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"></path></svg>');function B(m,l){v(l,!1);let a=s(l,"id",12,void 0),d=s(l,"style",12,void 0),n=s(l,"className",12,void 0),r=s(l,"fill",12,void 0),f=s(l,"size",12,"2rem");var c={get id(){return a()},set id(e){a(e),i()},get style(){return d()},set style(e){d(e),i()},get className(){return n()},set className(e){n(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return f()},set size(e){f(e),i()}},t=_();return o(()=>{u(t,"id",a()),N(t,d()),x(t,0,y(n())),u(t,"fill",r())}),w(m,t),z(c)}customElements.define("warning-circle-filled-32",g(B,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var E=h('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414"></path></svg>');function M(m,l){v(l,!1);let a=s(l,"id",12,void 0),d=s(l,"style",12,void 0),n=s(l,"className",12,void 0),r=s(l,"fill",12,void 0),f=s(l,"size",12,"2rem");var c={get id(){return a()},set id(e){a(e),i()},get style(){return d()},set style(e){d(e),i()},get className(){return n()},set className(e){n(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return f()},set size(e){f(e),i()}},t=E();return o(()=>{u(t,"id",a()),N(t,d()),x(t,0,y(n())),u(t,"fill",r())}),w(m,t),z(c)}customElements.define("cross-circle-filled-32",g(M,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var S=h('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0"></path></svg>');function F(m,l){v(l,!1);let a=s(l,"id",12,void 0),d=s(l,"style",12,void 0),n=s(l,"className",12,void 0),r=s(l,"fill",12,void 0),f=s(l,"size",12,"2rem");var c={get id(){return a()},set id(e){a(e),i()},get style(){return d()},set style(e){d(e),i()},get className(){return n()},set className(e){n(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return f()},set size(e){f(e),i()}},t=S();return o(()=>{u(t,"id",a()),N(t,d()),x(t,0,y(n())),u(t,"fill",r())}),w(m,t),z(c)}customElements.define("check-circle-filled-32",g(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var b=h('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z"></path></svg>');function k(m,l){v(l,!1);let a=s(l,"id",12,void 0),d=s(l,"style",12,void 0),n=s(l,"className",12,void 0),r=s(l,"fill",12,void 0),f=s(l,"size",12,"1.25rem");var c={get id(){return a()},set id(e){a(e),i()},get style(){return d()},set style(e){d(e),i()},get className(){return n()},set className(e){n(e),i()},get fill(){return r()},set fill(e){r(e),i()},get size(){return f()},set size(e){f(e),i()}},t=b();return o(()=>{u(t,"id",a()),N(t,d()),x(t,0,y(n())),u(t,"fill",r())}),w(m,t),z(c)}customElements.define("cross-20",g(k,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{F as C,L as I,B as W,M as a,k as b};
-//# sourceMappingURL=Cross20.js.map

package/dist/Cross20.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Cross20.js","sources":["../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircleFilled32/InfoCircleFilled32.svelte","../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircleFilled32/WarningCircleFilled32.svelte","../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled32/CrossCircleFilled32.svelte","../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircleFilled32/CheckCircleFilled32.svelte","../node_modules/@mozaic-ds/icons-svelte/dist/components/Cross20/Cross20.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'info-circle-filled-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-filled-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667\"/></svg>","<svelte:options customElement={{ tag: 'cross-circle-filled-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-filled-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'cross-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z\"/></svg>"],"names":["id","style","className","fill","size"],"mappings":"yfAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,gRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,icCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,gRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8iBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,gRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,geCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,gRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,odCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E","x_google_ignoreList":[0,1,2,3,4]}

package/dist/Cross24.js

@@ -1,2 +0,0 @@
-import{c as o,p as g,b as a,z as v,t as h,i as p,j as x,k as l,e as y,g as z}from"./custom-element.js";import"./legacy.js";import{s as m,a as _}from"./attributes.js";var w=v('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z"></path></svg>');function N(u,s){g(s,!1);let i=a(s,"id",12,void 0),r=a(s,"style",12,void 0),n=a(s,"className",12,void 0),d=a(s,"fill",12,void 0),f=a(s,"size",12,"1.5rem");var c={get id(){return i()},set id(e){i(e),l()},get style(){return r()},set style(e){r(e),l()},get className(){return n()},set className(e){n(e),l()},get fill(){return d()},set fill(e){d(e),l()},get size(){return f()},set size(e){f(e),l()}},t=w();return h(()=>{m(t,"id",i()),_(t,r()),y(t,0,z(n())),m(t,"fill",d())}),p(u,t),x(c)}customElements.define("cross-24",o(N,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{N as C};
-//# sourceMappingURL=Cross24.js.map

package/dist/Cross24.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Cross24.js","sources":["../node_modules/@mozaic-ds/icons-svelte/dist/components/Cross24/Cross24.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z\"/></svg>"],"names":["id","style","className","fill","size"],"mappings":"0gBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E","x_google_ignoreList":[0]}

package/dist/CrossCircleFilled24.js

@@ -1,2 +0,0 @@
-import{c as o,p as g,b as l,z as v,t as h,i as p,j as x,k as a,e as y,g as _}from"./custom-element.js";import"./legacy.js";import{s as c,a as w}from"./attributes.js";var z=v('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><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 2M8.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.414"></path></svg>');function N(m,s){g(s,!1);let i=l(s,"id",12,void 0),r=l(s,"style",12,void 0),d=l(s,"className",12,void 0),n=l(s,"fill",12,void 0),f=l(s,"size",12,"1.5rem");var u={get id(){return i()},set id(e){i(e),a()},get style(){return r()},set style(e){r(e),a()},get className(){return d()},set className(e){d(e),a()},get fill(){return n()},set fill(e){n(e),a()},get size(){return f()},set size(e){f(e),a()}},t=z();return h(()=>{c(t,"id",i()),w(t,r()),y(t,0,_(d())),c(t,"fill",n())}),p(m,t),x(u)}customElements.define("cross-circle-filled-24",o(N,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{N as C};
-//# sourceMappingURL=CrossCircleFilled24.js.map

package/dist/CrossCircleFilled24.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CrossCircleFilled24.js","sources":["../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled24/CrossCircleFilled24.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><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 2M8.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.414\"/></svg>"],"names":["id","style","className","fill","size"],"mappings":"wmBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E","x_google_ignoreList":[0]}

package/dist/documentation/Introduction.mdx

@@ -1,109 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-import ads from '../../.storybook/assets/logo.svg';
-import svelte from '../../.storybook/assets/svelte.svg';
-
-<Meta title="Getting Started/Introduction" />
-
-<p
-  style={{
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '1rem',
-  }}
->
-  <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
-  <span style={{ fontSize: '32px' }}>x</span>
-  <img src={svelte} alt="Svelte.js logo" style={{ height: '80px' }} />
-</p>
-
-<h1 align="center">ADEO Design system - Web Components (Svelte)</h1>
-
-<p align="center">
-  A library of **Svelte** and **Web Component** 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/web-components">
-    <img
-      src="https://img.shields.io/npm/v/@mozaic-ds/web-components?label=NPM&logo=npm&color=yellow"
-      alt="npm version"
-    />
-  </a>
-  <a href="https://github.com/adeo/mozaic-web-components/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/C021A2J25C4">
-    <img
-      src="https://img.shields.io/badge/Slack-mozaic_web_components-611f69.svg?logo=slack"
-      alt="Slack mozaic-web-components"
-    />
-  </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
-
-ADEO Design system is a global and collaborative design system
-that facilitates the designer and developer experience,
-enabling them to create universal interfaces
-perfectly aligned with the business strategy of Adeo.
-
-## 🚀 Ambition
-
-The ambition behind this library was to provide a set of **Web Components** to simplify the implementation of the **ADEO Design System** across various front-end architectures.
-
-To achieve this, we chose **Svelte** as the core framework, leveraging its ability to generate native **Custom Elements**. Compared to other solutions like **Lit** or **Stencil**, **Svelte** stood out due to its simplicity, ease of integration, and lightweight nature.
-
-If you're curious about the genesis of this library, check out our detailed article:  
-👉 **[ADEO Design System: Building a Web Component Library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163)**.
-
-Given ADEO’s strong focus on e-commerce, the use of **Svelte** grew beyond initial expectations. As a result, the `@mozaic-ds/web-components` package now provides both **Web Components** and native **Svelte Components**.
-
-This Storybook showcases primarily the **Web Components**.
-
-- For guidance on how to use the **Web Components**, refer to our **[Web Components documentation](/docs/web-components--docs)**.
-- For guidance on how to use the **Svelte components**, refer to our **[Svelte components documentation](/docs/svelte-components--docs)**.
-
-## 🧐 Svelte vs Web Components
-
-To help you choose between Svelte native component or Web Components you can follow this guidance:
-
-- Web Components → Ideal when working in multi-framework environments or if your architecture is not Svelte-based.
-- Svelte Components → Perfect for Svelte apps, with a native and seamless developer experience.
-
-## 🤝 Contributing
-
-Be part of something bigger!
-
-**Mozaic-WebComponent** is made possible by an incredible community that finds issues and creates pull requests.\
-It is our job to enable you to create amazing applications.
-
-To do so, see our **[contributing process](/docs/getting-started-contributing--docs)**.
-
-## ℹ️ Support
-
-If you have any questions or need assistance,\
-we are here to help.
-
-Whether you're troubleshooting, looking for documentation,\
-or need to get in touch with our team,\
-you'll find all the resources you need to get the most out of **Mozaic-WebComponent**.
-
-Visit our **[Support page](/docs/getting-started-support-onboarding--docs)** for more information.

package/dist/documentation/SupportAndOnboarding.mdx

@@ -1,70 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta
-  title="Getting Started/Help & Support"
-  parameters={{
-    layout: 'fullscreen',
-    viewMode: 'docs',
-    previewTabs: {
-      canvas: { hidden: true },
-    },
-  }}
-/>
-
-<style>
-  {`
-  .mc-button--mdx {
-      color: #fff;
-    }
-  `}
-</style>
-
-# Need help?
-
-## Support
-
-Any feedback, ideas or questions?
-
-The **ADEO Design System team** would welcome any feedback, ideas, or requirements that you have.<br/>
-
-Our goal is to make your lives easier.
-
-If you want to get more detailed information on the components or any other topic related to Mozaic web-components, you can contact us through the channels below.
-
-- Join the [#mozaic-web-component](https://app.slack.com/client/T4R6RCZFA/C021A2J25C4) channel on **Slack**
-
-- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
-
-- Join our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)
-
-## Demo
-
-Once a month, on the last Thursday of the month, the Design System team organises a retro/demo.
-
-On the agenda:
-
-- Presentation of the main features on the library of the past month
-
-- Open discussion about your needs, feedbacks & requests
-
-- Technical discussion about the direction of the project.
-
-Want to be a part of it?! <br/>
-
-Nothing could be easier, you just have to add the **Demo - Mozaic-Web-Component** agenda to yours, by clicking on this link below:
-
-- Join our [Mozaic web components demo](https://calendar.google.com/calendar/u/1?cid=Y19jYmU2ZmFmM2NkODE1NGYyMzkyOTU3MzQyZDdhNjIyNmU2YmVhYjNlNjkwMTM1YjY4MDM0MDJlYTgzNTdhMzA0QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20)
-
-## Onboarding Sessions
-
-Are you new to using a design system, and in particular Mozaic?<br/>
-
-Do you want to know more about how **Mozaic** works, and more specifically how to use Mozaic-web-components?<br/>
-
-You need a personalized support to install or configure your project?
-
-The **Mozaic Design System team** is at your disposal for that.
-
-Do not hesitate to book a slot for **an onboarding session**, by going to this url:
-
-- I book an [onboarding session](https://calendar.google.com/calendar/u/0/appointments/AcZssZ13Wlk-9EHijqW461I_re20kxmteeTAm850Ob4=)

package/dist/documentation/Svelte/Introduction.mdx

@@ -1,76 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Svelte/Introduction" />
-
-<style>
-  {`
-  .outlineCTA {
-    margin: 16px auto;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .outlineCTA span {
-    font-size: 14px;
-  }
-
-  .ch-frame-buttons {
-    margin: 0 .8em !important;
-  }
-
-  .ch-frame-button {
-    font-size: 12px !important;
-  }
-  `}
-</style>
-
-# ✨ Getting Started
-
-**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).
-
-Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).
-
-In addition to Web Components, **@mozaic-ds/web-components** package also exposes native **Svelte Components**, offering an even smoother developer experience when working within **Svelte-based applications**.
-
-## 🚀 Installation
-
-> **PREREQUISITES:**<br/>
-> Installing Mozaic packages require node v18+.<br/>
-> Installing Mozaic packages require Svelte 5.<br/>
-
-Install the Svelte components package:
-
-```bash
-npm install @mozaic-ds/web-components --save
-```
-
-Or with **Yarn**:
-
-```bash
-yarn add @mozaic-ds/web-components -E
-```
-
-## 📦 Usage
-
-You can import and use the Svelte components directly:
-
-Simply call the component as follows:
-
-```html
-<script>
-  import { Button } from '@mozaic-ds/web-components/svelte';
-</script>
-
-<button appearance="accent">My first svelte Button</button>
-```
-
-## 🔥 Why Use Native Svelte Components?
-
-> Full compatibility with Svelte’s reactivity system.
-> Simpler syntax, no need to deal with custom element registration.
-> Easier to compose with other Svelte components.
-
-## 📚 Available Components
-
-Explore the list of available components in this Storybook, each with usage examples, props, and customization options.

package/dist/documentation/Svelte/usingIcons.mdx

@@ -1,98 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Svelte/Icons Usage (Svelte)" />
-
-# 🖼️ Using Mozaic Icons in Svelte
-
-The **Mozaic Design System** provides a comprehensive set of brand-compliant icons, available as ready-to-use **Svelte components** via the `@mozaic-ds/icons-svelte` package.
-
-👀 [ADS-2 icon's showcase](https://psychic-telegram-3j2oqjk.pages.github.io/) <br/>
-🛠️ [Icon's name mapping](https://github.com/adeo/mozaic-icons/blob/main/MIGRATION.md)
-
-These icons are:
-
-- **Optimized**: Lightweight and scalable SVGs.
-- **Customizable**: Adjustable size, color, and accessibility attributes.
-- **Consistent**: Aligned with ADEO's design principles.
-
----
-
-## 🚀 Installation
-
-To start using Mozaic icons:
-
-```bash
-npm install @mozaic-ds/icons-svelte
-```
-
-or
-
-```bash
-yarn add @mozaic-ds/icons-svelte
-```
-
-## 📦 Basic Usage
-
-Each icon is provided as an individual Svelte component.
-You can import and use them like this:
-
-```svelte
-<script>
-  import More64 from '@mozaic-ds/icons-svelte/svelte/More64/More64.svelte';
-</script>
-
-<More64 />
-```
-
-## 🧩 Icon Naming Convention Mozaic icons follow a simple and predictable naming
-
-convention:
-
-```
-[IconName][Size]
-```
-
-- IconName: Descriptive name in PascalCase (e.g., Search, Close, More)
-- Size: Default icon size, available as 20, 24, 32, 64
-
-## 📛 Examples:
-
-```svelte
-import {(Search24, Close16, More64, ArrowLeft32)} from '@mozaic-ds/icons-svelte/svelte';
-```
-
-## 📐 Available Sizes & Use Cases
-
-Here are the available icon sizes and typical contexts:
-
-```
-20px → Small buttons, labels, inline elements
-24px → Toolbars, navigation menus
-32px → Dialog headers, modals, primary buttons
-64px → Hero sections, illustrations, large displays
-
-```
-
-> 🎯 Tip: Always use the closest available size to your design needs to ensure sharp rendering.
-
-## 🎨 Customization Options
-
-Each icon component accepts standard SVG attributes:
-
-```svelte
-<Close16 width="20" height="20" fill="currentColor" aria-label="Close" />
-```
-
-- `width / height`: Control size
-- `fill`: Icon color (recommend using "currentColor")
-- `aria-label`: For accessibility
-
-## ⚙️ Best Practices
-
-- ✅ Use the appropriate size icon directly — no need to scale manually.
-- ✅ Inherit text color using fill="currentColor".
-
-## 📚 Useful Links
-
-- 📦 [@mozaic-ds/icons-svelte on NPM](https://www.npmjs.com/package/@mozaic-ds/icons-svelte)
-- 🛠️ [Mozaic Icons GitHub Repo](https://github.com/adeo/mozaic-icons-svelte)

package/dist/documentation/Svelte/usingPresets.mdx

@@ -1,134 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Svelte/Using Presets" />
-
-# 🎨 ADEO Design System's Presets
-
-**ADEO Design System** is a **multi-brand design system** designed for maximum flexibility.<br/>
-It provides a set of **Svelte** using **tokens** that can be fully customized to adapt to each brand’s visual identity and guidelines.
-
-To make customization easier, **ADEO Design System** offers ready-to-use themes tailored for specific brands or internal contexts.
-
-Currently, ADEO Design System supports the following presets:
-
-- **Leroy Merlin preset**: Default preset applied when ADEO Design System is first installed.
-- **Adeo preset**: Targeted at internal interfaces and products of the **Adeo Group**.
-- **Mbrand preset**: Designed for the **Mbrand** brand's interfaces and products.
-
-> ℹ️ **Note:**  
-> The process shown below is valid for all presets — simply replace `"adeo"` by the desired brand name (e.g., `"mbrand"` or `"bricocenter"`).
-
----
-
-## 🚀 Preset usage
-
-Before starting, ensure you’ve completed the installation of **ADEO Design System Web Components** and its related tokens, as described in the [Getting Started](?path=/docs/getting-started-svelte-introduction--docs) section.
-
-### 1️⃣ Load the preset
-
-To load a preset, simply import the corresponding Sass token package into your main stylesheet:
-
-```scss
-// Main stylesheet (e.g., styles.scss)
-@use '@mozaic-ds/tokens/<presetName>/theme';
-```
-
-> **Replace `<presetName>` with:**
->
-> - `adeo`
-> - `mbrand`
-> - `bricocenter`
->
-> **Note:** The `leroymerlin` preset is applied by default, so no need to explicitly import it unless overriding.
-
-Example for **Adeo**:
-
-```scss
-@use '@mozaic-ds/tokens/adeo/theme';
-```
-
-<br />
-
-> [!NOTE]: The use of presets described in this documentation is the minimal and most standard use that corresponds to the needs of the majority of users. However, the design system also offers the possibility of advanced use of this functionality.<br/>
-> To find out more about all the possibilities offered by the use of presets, please refer to [the main documentation for the `@mozaic-ds/styles` package](https://github.com/adeo/mozaic-styles/tree/main/packages/styles#theming) _(intern only)_.
-
----
-
-### 2️⃣ Load the correct brand font
-
-Each brand not only has specific styles but also uses a dedicated font.
-
-| Brand        | Recommended Font | Link                                                                            |
-| ------------ | ---------------- | ------------------------------------------------------------------------------- |
-| Leroy Merlin | LeroyMerlinSans  | [View Details](https://mozaic.adeo.cloud/foundations/typography/font-families/) |
-| Adeo         | Roboto           | [Roboto on Google Fonts](https://fonts.google.com/specimen/Roboto)              |
-| Bricoman     | Inter            | [Inter on Google Fonts](https://fonts.google.com/specimen/Inter)                |
-
-To apply the correct font in your project:
-
-```scss
-//LeroyMerlin
-@use '@mozaic-ds/styles/tools/t.font' as *;
-@include import-font-lm();
-
-body {
-  @include set-font-family();
-}
-```
-
-```scss
-//ADEO
-@use '@mozaic-ds/styles/tools/t.font' as *;
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap') body {
-  @include set-font-family();
-}
-```
-
-```scss
-//M-Brand
-@use '@mozaic-ds/styles/tools/t.font' as *;
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-body {
-  @include set-font-family();
-}
-```
-
----
-
-#### 📝 Specific case: **Leroy Merlin font**
-
-For the **Leroy Merlin** preset, we recommend using the **LeroyMerlinSans** font, specifically designed for LM products.
-
-To include it in your project:
-
-1. Create a folder to store fonts (e.g., `static/assets/fonts`).
-2. Copy fonts from ADEO Design System’s dependency:
-
-```bash
-cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts
-```
-
-Then, import and reference the fonts in your stylesheets as needed.
-
----
-
-### 3️⃣ Using Components
-
-Once the preset and font are configured, you can directly start using ADEO Design System’s Web Components customized with your selected preset.
-
-Example:
-
-```html
-<script>
-  import { Button } from '@mozaic-ds/web-components/svelte';
-</script>
-
-<button appearance="accent">Button label</button>
-```
-
----
-
-## 📚 Going Further
-
-- Learn how to set up **Svelte** in detail in the [Svelte documentation](?path=/docs/getting-started-svelte-introduction--docs).