@mozaic-ds/web-components 0.29.0 → 0.30.0-beta.0

package/public/components/fileuploader/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","sources":["../../../src/components/fileuploader/FileUploader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  // @ts-nocheck\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import ResultFile from './fileuploader-result.nested.svelte';\n\n  export let id: string;\n  export let name: string;\n  export let label: string;\n  export let accept: string;\n  export let multiple = true;\n  export let allowedextensions: string;\n  export let maxsize: number;\n  export let displayfileslist = false;\n  export let disabled = false;\n  export let removelabel = 'Remove';\n  export let uploadedfiles: string;\n  export let errorlabels: string;\n  export let stateless: false;\n  export let keepPrevious: boolean;\n\n  let files: FileList;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : [];\n  $: uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : [];\n  $: files;\n  $: maxSize = maxsize ? maxsize : undefined;\n  $: errorLabels = errorlabels ? JSON.parse(errorlabels) : [];\n\n  function checkFileSize(fileSize: number): boolean {\n    const fileSizeMB = fileSize / 1024 / 1024; // in MB\n    if (maxSize && fileSizeMB > maxSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function checkFileExtension(fileName: string): boolean {\n    if (allowedExtensions && allowedExtensions.length > 0) {\n      const extension: string = fileName.slice(\n        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,\n      );\n      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {\n        return false; // invalid\n      }\n    }\n\n    return true; // valid\n  }\n  function handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n\n    if(keepPrevious && files?.length > 0){\n      const previousSelection: File[] = [...files]\n      const newSelection: File[] = [...target.files as FileList]\n      const dataTransfer: DataTransfer = new DataTransfer()\n      previousSelection.forEach((item) => dataTransfer.items.add(item))\n      newSelection.forEach((item) => dataTransfer.items.add(item))\n\n      files = dataTransfer.files\n\n    } else {\n      files = target.files as FileList;\n    }\n\n    displayfileslist = true;\n    const invalidFiles: Array<any> = [];\n    const fileList = [...files];\n\n    fileList.forEach((file, index) => {\n      const fileName = file.name;\n      const fileSize = file.size;\n      const validExtension = checkFileExtension(fileName);\n      const validSize = checkFileSize(fileSize);\n      let errorType = '';\n\n      if (!validExtension) {\n        errorType = 'invalid-extension';\n      }\n\n      if (!validSize) {\n        errorType = 'invalid-size';\n      }\n\n      if (!validExtension || !validSize) {\n        invalidFiles.push({\n          index: index,\n          fileName: fileName,\n          fileSize: fileSize,\n          errorType: errorType,\n        });\n      }\n    });\n\n    if (invalidFiles.length > 0) {\n      eventHandler.dispatch(\n        get_current_component(),\n        'invalid-files',\n        invalidFiles,\n      );\n    }\n    eventHandler.dispatch('change', files);\n\n    const fileuploader = root.querySelector(\n       '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    if (stateless) {\n      fileuploader.value = '';\n    } else {\n      fileuploader.files = files\n    }\n  }\n\n  function removeFromArray(fileList: FileList, value: File): FileList {\n    const array = Array.from(fileList);\n    const idx = array.indexOf(value);\n    if (idx !== -1) {\n      array.splice(idx, 1);\n    }\n\n    const dataTransfer: DataTransfer = new DataTransfer()\n    array.forEach((item) => dataTransfer.items.add(item))\n\n    return dataTransfer.files\n  }\n\n  function deleteFile(e: CustomEvent): void {\n    files = removeFromArray(files, e.detail);\n    const fileuploader = root.querySelector(\n      '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    fileuploader.files = files;\n\n    eventHandler.dispatch('change', files);\n    eventHandler.dispatch('file-removed', e.detail);\n  }\n\n  function deleteUploadedFile(e: CustomEvent): void {\n    const files = removeFromArray(uploadedFiles, e.detail);\n    uploadedFiles = files;\n    eventHandler.dispatch('uploaded-file-removed', e.detail);\n  }\n\n  function hasInvalidFiles(e: CustomEvent): void {\n    eventHandler.dispatch('invalid-files', e.detail);\n  }\n</script>\n\n<div class=\"mc-fileuploader\" bind:this={root}>\n  <input\n    {id}\n    {name}\n    type=\"file\"\n    class=\"mc-fileuploader__input\"\n    {accept}\n    {multiple}\n    {disabled}\n    on:change={handleChange}\n  />\n  <label for={id} class=\"mc-fileuploader__label\">\n    <span class=\"mc-fileuploader__label--center\">\n      {label}\n    </span>\n  </label>\n  {#if displayfileslist && files && files.length > 0}\n    <ResultFile\n      {files}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteFile}\n    />\n  {/if}\n  {#if uploadedFiles.length > 0}\n    <ResultFile\n      files={uploadedFiles}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteUploadedFile}\n    />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.file-uploader';\n</style>\n"],"names":["ctx","if_block0","length","create_if_block_1","create_if_block","insert","target","div","anchor","append","input","label_1","span","removeFromArray","fileList","value","array","Array","from","idx","indexOf","splice","dataTransfer","DataTransfer","forEach","item","items","add","files","root","id","$$props","name","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","keepPrevious","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allowedExtensions","JSON","parse","uploadedFiles","maxSize","undefined","errorLabels","e","previousSelection","newSelection","invalidFiles","file","index","fileName","fileSize","size","validExtension","extension","slice","lastIndexOf","includes","String","checkFileExtension","validSize","checkFileSize","errorType","push","dispatch","fileuploader","querySelector","detail","$$value"],"mappings":"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"}
+{"version":3,"file":"FileUploader.js","sources":["../../../src/components/fileuploader/FileUploader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  // @ts-nocheck\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import ResultFile from './fileuploader-result.nested.svelte';\n\n  export let id: string;\n  export let name: string;\n  export let label: string;\n  export let accept: string;\n  export let multiple = true;\n  export let allowedextensions: string;\n  export let maxsize: number;\n  export let displayfileslist = false;\n  export let disabled = false;\n  export let removelabel = 'Remove';\n  export let uploadedfiles: string;\n  export let errorlabels: string;\n  export let stateless: false;\n  export let keepPrevious: boolean;\n\n  let files: FileList;\n  let root: HTMLElement;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: allowedExtensions = allowedextensions ? JSON.parse(allowedextensions) : [];\n  $: uploadedFiles = uploadedfiles ? JSON.parse(uploadedfiles) : [];\n  $: files;\n  $: maxSize = maxsize ? maxsize : undefined;\n  $: errorLabels = errorlabels ? JSON.parse(errorlabels) : [];\n\n  function checkFileSize(fileSize: number): boolean {\n    const fileSizeMB = fileSize / 1024 / 1024; // in MB\n    if (maxSize && fileSizeMB > maxSize) {\n      return false; // invalid\n    }\n\n    return true; // valid\n  }\n  function checkFileExtension(fileName: string): boolean {\n    if (allowedExtensions && allowedExtensions.length > 0) {\n      const extension: string = fileName.slice(\n        ((fileName.lastIndexOf('.') - 1) >>> 0) + 2,\n      );\n      if (allowedExtensions && !allowedExtensions.includes(String(extension))) {\n        return false; // invalid\n      }\n    }\n\n    return true; // valid\n  }\n  function handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n\n    if(keepPrevious && files?.length > 0){\n      const previousSelection: File[] = [...files]\n      const newSelection: File[] = [...target.files as FileList]\n      const dataTransfer: DataTransfer = new DataTransfer()\n      previousSelection.forEach((item) => dataTransfer.items.add(item))\n      newSelection.forEach((item) => dataTransfer.items.add(item))\n\n      files = dataTransfer.files\n\n    } else {\n      files = target.files as FileList;\n    }\n\n    displayfileslist = true;\n    const invalidFiles: Array<any> = [];\n    const fileList = [...files];\n\n    fileList.forEach((file, index) => {\n      const fileName = file.name;\n      const fileSize = file.size;\n      const validExtension = checkFileExtension(fileName);\n      const validSize = checkFileSize(fileSize);\n      let errorType = '';\n\n      if (!validExtension) {\n        errorType = 'invalid-extension';\n      }\n\n      if (!validSize) {\n        errorType = 'invalid-size';\n      }\n\n      if (!validExtension || !validSize) {\n        invalidFiles.push({\n          index: index,\n          fileName: fileName,\n          fileSize: fileSize,\n          errorType: errorType,\n        });\n      }\n    });\n\n    if (invalidFiles.length > 0) {\n      eventHandler.dispatch(\n        get_current_component(),\n        'invalid-files',\n        invalidFiles,\n      );\n    }\n    eventHandler.dispatch('change', files);\n\n    const fileuploader = root.querySelector(\n       '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    if (stateless) {\n      fileuploader.value = '';\n    } else {\n      fileuploader.files = files\n    }\n  }\n\n  function removeFromArray(fileList: FileList, value: File): FileList {\n    const array = Array.from(fileList);\n    const idx = array.indexOf(value);\n    if (idx !== -1) {\n      array.splice(idx, 1);\n    }\n    \n    if(value instanceof File) {\n      const dataTransfer: DataTransfer = new DataTransfer()\n      array.forEach((item) => dataTransfer.items.add(item))\n      return dataTransfer.files\n    }\n    else {\n      return array\n    }\n  }\n\n  function deleteFile(e: CustomEvent): void {\n    files = removeFromArray(files, e.detail);\n    const fileuploader = root.querySelector(\n      '.mc-fileuploader__input',\n    ) as HTMLInputElement;\n    fileuploader.files = files;\n\n    eventHandler.dispatch('change', files);\n    eventHandler.dispatch('file-removed', e.detail);\n  }\n\n  function deleteUploadedFile(e: CustomEvent): void {\n    const files = removeFromArray(uploadedFiles, e.detail);\n    uploadedFiles = files;\n    eventHandler.dispatch('uploaded-file-removed', e.detail);\n  }\n\n  function hasInvalidFiles(e: CustomEvent): void {\n    eventHandler.dispatch('invalid-files', e.detail);\n  }\n</script>\n\n<div class=\"mc-fileuploader\" bind:this={root}>\n  <input\n    {id}\n    {name}\n    type=\"file\"\n    class=\"mc-fileuploader__input\"\n    {accept}\n    {multiple}\n    {disabled}\n    on:change={handleChange}\n  />\n  <label for={id} class=\"mc-fileuploader__label\">\n    <span class=\"mc-fileuploader__label--center\">\n      {label}\n    </span>\n  </label>\n  {#if displayfileslist && files && files.length > 0}\n    <ResultFile\n      {files}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteFile}\n    />\n  {/if}\n  {#if uploadedFiles.length > 0}\n    <ResultFile\n      files={uploadedFiles}\n      {allowedExtensions}\n      {disabled}\n      {maxSize}\n      {removelabel}\n      {errorLabels}\n      on:file-removed={deleteUploadedFile}\n    />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.file-uploader';\n</style>\n"],"names":["ctx","if_block0","length","create_if_block_1","create_if_block","insert","target","div","anchor","append","input","label_1","span","removeFromArray","fileList","value","array","Array","from","idx","indexOf","splice","File","dataTransfer","DataTransfer","forEach","item","items","add","files","root","id","$$props","name","label","accept","multiple","allowedextensions","maxsize","displayfileslist","disabled","removelabel","uploadedfiles","errorlabels","stateless","keepPrevious","eventHandler","EventHandler","get_current_component","createEventDispatcher","$$invalidate","allowedExtensions","JSON","parse","uploadedFiles","maxSize","undefined","errorLabels","e","previousSelection","newSelection","invalidFiles","file","index","fileName","fileSize","size","validExtension","extension","slice","lastIndexOf","includes","String","checkFileExtension","validSize","checkFileSize","errorType","push","dispatch","fileuploader","querySelector","detail","$$value"],"mappings":"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"}

package/public/components/fileuploader/FileUploader.svelte

@@ -127,11 +127,15 @@
     if (idx !== -1) {
       array.splice(idx, 1);
     }
-
-    const dataTransfer: DataTransfer = new DataTransfer()
-    array.forEach((item) => dataTransfer.items.add(item))
-
-    return dataTransfer.files
+    
+    if(value instanceof File) {
+      const dataTransfer: DataTransfer = new DataTransfer()
+      array.forEach((item) => dataTransfer.items.add(item))
+      return dataTransfer.files
+    }
+    else {
+      return array
+    }
   }
 
   function deleteFile(e: CustomEvent): void {

package/public/components/menu/Menu.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as i,g as n,b as s,f as o,s as a,e as l,n as r,h as m,k as c,m as d,R as f,p as u,q as b,r as g,d as h,v as p,t as _,x as w,y as x}from"../../index-c222d0b7.js";import{E as k}from"../../EventHandler-f7ee47ca.js";function v(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function $(e){let t,i,n;return{c(){t=l("span"),i=l("slot"),m(i,"prop",n=e[8]),m(i,"name","icon"),m(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),c(t,i)},p(e,t){2&t&&n!==(n=e[8])&&m(i,"prop",n)},d(e){e&&d(t)}}}function y(e){let t,i,n,o,a,r,f,u,b,g,k=`<${C(e[8].iconName,e[0]===e[10])} />`,v=e[8].label+"",y=e[3].icon&&$(e);function E(){return e[6](e[10],e[8])}return{c(){t=l("li"),i=l("div"),n=l("span"),o=h(),y&&y.c(),a=h(),r=l("span"),f=p(v),u=h(),m(n,"class","mc-menu__icon"),m(r,"class","mc-menu__label"),m(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),m(t,"class","mc-menu__item")},m(e,l){s(e,t,l),c(t,i),c(i,n),n.innerHTML=k,c(i,o),y&&y.m(i,null),c(i,a),c(i,r),c(r,f),c(t,u),b||(g=w(i,"click",E),b=!0)},p(t,s){e=t,3&s&&k!==(k=`<${C(e[8].iconName,e[0]===e[10])} />`)&&(n.innerHTML=k),e[3].icon?y?y.p(e,s):(y=$(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&v!==(v=e[8].label+"")&&x(f,v),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),y&&y.d(),b=!1,g()}}}function E(e){let t,i,n=e[1],o=[];for(let t=0;t<n.length;t+=1)o[t]=y(v(e,n,t));return{c(){t=l("nav"),i=l("ul");for(let e=0;e<o.length;e+=1)o[e].c();this.c=r,m(i,"class","mc-menu__list"),m(t,"class","mc-menu"),m(t,"aria-label","menu")},m(e,n){s(e,t,n),c(t,i);for(let e=0;e<o.length;e+=1)o[e]&&o[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=v(e,n,s);o[s]?o[s].p(a,t):(o[s]=y(a),o[s].c(),o[s].m(i,null))}for(;s<o.length;s+=1)o[s].d(1);o.length=n.length}},i:r,o:r,d(e){e&&d(t),f(o,e)}}}function C(e,t){return t?`${e} fill="white" `:`${e} `}function z(e,t,i){let n,s,{$$slots:o={},$$scope:a}=t;const l=u(o);let{items:r}=t,{selected:m}=t,c=new k(b(),g());function d(e,t){i(0,s=e),c.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,r=e.items),"selected"in e&&i(5,m=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=r?JSON.parse(r):[]),32&e.$$.dirty&&i(0,s=m?Number(m):"")},[s,n,d,l,r,m,(e,t)=>d(e,t)]}class L extends e{constructor(e){super();const l=document.createElement("style");l.textContent=".mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{list-style:none;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__item:first-of-type .mc-menu__link{border-radius:0.25rem 0.25rem 0 0}.mc-menu__item:last-of-type .mc-menu__link{border-radius:0 0 0.25rem 0.25rem}.mc-menu__link{font-weight:400;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;outline:none;width:100%}.mc-menu__link::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;z-index:var(--menu-link-z-index, 1)}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeeff1}.mc-menu__link:active{background-color:#cfd2d8}.mc-menu__link:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-menu__link.is-active{background-color:#188803;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link.is-active .mc-menu__label{font-family:\"LeroyMerlin\", sans-serif;font-weight:600}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"LeroyMerlin\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},z,E,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),o()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),o()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),o()}}export{L as default};
+import{S as e,i as t,a as i,g as n,b as s,f as o,s as a,e as l,n as r,h as m,k as c,m as d,R as f,p as u,q as h,r as b,d as g,v as p,t as _,x as w,y as x,J as k,M as v}from"../../index-c222d0b7.js";import{E as $}from"../../EventHandler-f7ee47ca.js";function y(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function E(e){let t,i=`<${N(e[8].iconName,e[0]===e[10])} />`;return{c(){t=l("span"),m(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),t.innerHTML=i},p(e,n){3&n&&i!==(i=`<${N(e[8].iconName,e[0]===e[10])} />`)&&(t.innerHTML=i)},d(e){e&&d(t)}}}function C(e){let t,i,n;return{c(){t=l("span"),i=l("slot"),m(i,"prop",n=e[8]),m(i,"name","icon"),m(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),c(t,i)},p(e,t){2&t&&n!==(n=e[8])&&m(i,"prop",n)},d(e){e&&d(t)}}}function z(e){let t,i,n,o;return{c(){t=k("svg"),i=k("use"),m(i,"href",n=e[8].iconPath),m(t,"class","mc-menu__icon"),m(t,"fill",o=e[0]===e[10]?"white":""),v(t,"width","2rem")},m(e,n){s(e,t,n),c(t,i)},p(e,s){2&s&&n!==(n=e[8].iconPath)&&m(i,"href",n),1&s&&o!==(o=e[0]===e[10]?"white":"")&&m(t,"fill",o)},d(e){e&&d(t)}}}function M(e){let t,i,n,o,a,r,f,u,h,b,k=e[8].label+"",v=e[8].iconName&&E(e),$=e[3].icon&&C(e),y=e[8].iconPath&&z(e);function M(){return e[6](e[10],e[8])}return{c(){t=l("li"),i=l("div"),v&&v.c(),n=g(),$&&$.c(),o=g(),y&&y.c(),a=g(),r=l("span"),f=p(k),u=g(),m(r,"class","mc-menu__label"),m(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),m(t,"class","mc-menu__item")},m(e,l){s(e,t,l),c(t,i),v&&v.m(i,null),c(i,n),$&&$.m(i,null),c(i,o),y&&y.m(i,null),c(i,a),c(i,r),c(r,f),c(t,u),h||(b=w(i,"click",M),h=!0)},p(t,s){(e=t)[8].iconName?v?v.p(e,s):(v=E(e),v.c(),v.m(i,n)):v&&(v.d(1),v=null),e[3].icon?$?$.p(e,s):($=C(e),$.c(),$.m(i,o)):$&&($.d(1),$=null),e[8].iconPath?y?y.p(e,s):(y=z(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&k!==(k=e[8].label+"")&&x(f,k),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),v&&v.d(),$&&$.d(),y&&y.d(),h=!1,b()}}}function L(e){let t,i,n=e[1],o=[];for(let t=0;t<n.length;t+=1)o[t]=M(y(e,n,t));return{c(){t=l("nav"),i=l("ul");for(let e=0;e<o.length;e+=1)o[e].c();this.c=r,m(i,"class","mc-menu__list"),m(t,"class","mc-menu"),m(t,"aria-label","menu")},m(e,n){s(e,t,n),c(t,i);for(let e=0;e<o.length;e+=1)o[e]&&o[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=y(e,n,s);o[s]?o[s].p(a,t):(o[s]=M(a),o[s].c(),o[s].m(i,null))}for(;s<o.length;s+=1)o[s].d(1);o.length=n.length}},i:r,o:r,d(e){e&&d(t),f(o,e)}}}function N(e,t){return t?`${e} fill="white" `:`${e} `}function P(e,t,i){let n,s,{$$slots:o={},$$scope:a}=t;const l=u(o);let{items:r}=t,{selected:m}=t,c=new $(h(),b());function d(e,t){i(0,s=e),c.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,r=e.items),"selected"in e&&i(5,m=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=r?JSON.parse(r):[]),32&e.$$.dirty&&i(0,s=m?Number(m):"")},[s,n,d,l,r,m,(e,t)=>d(e,t)]}class B extends e{constructor(e){super();const l=document.createElement("style");l.textContent=".mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{list-style:none;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__item:first-of-type .mc-menu__link{border-radius:0.25rem 0.25rem 0 0}.mc-menu__item:last-of-type .mc-menu__link{border-radius:0 0 0.25rem 0.25rem}.mc-menu__link{font-weight:400;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;outline:none;width:100%}.mc-menu__link::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;z-index:var(--menu-link-z-index, 1)}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeeff1}.mc-menu__link:active{background-color:#cfd2d8}.mc-menu__link:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-menu__link.is-active{background-color:#188803;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link.is-active .mc-menu__label{font-family:\"LeroyMerlin\", sans-serif;font-weight:600}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"LeroyMerlin\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},P,L,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),o()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),o()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),o()}}export{B as default};
 //# sourceMappingURL=Menu.js.map

package/public/components/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/menu/Menu.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { menuType } from './menu.types';\n  export let items: string;\n  export let selected: string;\n  $: menuItems = items ? (JSON.parse(items) as menuType[]) : [];\n  $: itemSelected = selected ? Number(selected) : '';\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function generateIconName(\n    iconName: string | undefined,\n    isActive: boolean,\n  ): string {\n    if (isActive) return `${iconName} fill=\"white\" `;\n    else return `${iconName} `;\n  }\n\n  function manageMenu(index: any, item: any) {\n    itemSelected = index;\n    eventHandler.dispatch('item-selected', {\n      index,\n      item,\n    });\n  }\n</script>\n\n<nav class=\"mc-menu\" aria-label=\"menu\">\n  <ul class=\"mc-menu__list\">\n    {#each menuItems as item, index}\n      <li class=\"mc-menu__item\">\n        <!-- svelte-ignore a11y-click-events-have-key-events -->\n        <div\n          class=\"mc-menu__link\"\n          class:is-active={itemSelected === index}\n          class:is-disabled={item.disabled}\n          on:click={() => manageMenu(index, item)}\n        >\n          <span class=\"mc-menu__icon\">\n            {@html `<${generateIconName(\n              item.iconName,\n              itemSelected === index,\n            )} />`}\n          </span>\n          {#if $$slots.icon}\n            <span class=\"mc-menu__icon\"><slot prop={item} name=\"icon\" /></span>\n          {/if}\n          <span class=\"mc-menu__label\">{item.label}</span>\n        </div>\n      </li>\n    {/each}\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.menu';\n</style>\n"],"names":["ctx","insert","target","span","anchor","append","slot","raw_value","generateIconName","iconName","t2_value","label","if_block","icon","create_if_block","toggle_class","div","disabled","li","span0","span1","dirty","innerHTML","set_data","t2","length","i","nav","ul","isActive","items","$$props","selected","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageMenu","index","item","$$invalidate","itemSelected","dispatch","menuItems","JSON","parse","Number"],"mappings":"kXAsDoDA,EAAI,4DAA5CC,EAAkEC,EAAAC,EAAAC,GAAtCC,EAAgCF,EAAAG,uBAApBN,EAAI,yEANjCO,EAAA,IAAAC,EACTR,EAAI,GAACS,SACLT,OAAiBA,EAAK,UAMIU,EAAAV,KAAKW,MAAK,GAHnCC,EAAAZ,KAAQa,MAAIC,EAAAd,0NAVAe,EAAAC,EAAA,YAAAhB,OAAiBA,EAAK,KACpBe,EAAAC,EAAA,cAAAhB,KAAKiB,+CAL5BhB,EAmBIC,EAAAgB,EAAAd,GAjBFC,EAgBKa,EAAAF,GAVHX,EAKMW,EAAAG,8CAINd,EAA+CW,EAAAI,wDARlC,EAAAC,GAAAd,KAAAA,EAAA,IAAAC,EACTR,EAAI,GAACS,SACLT,OAAiBA,EAAK,aAAAmB,EAAAG,UAAAf,GAGrBP,KAAQa,2DAGiB,EAAAQ,GAAAX,KAAAA,EAAAV,KAAKW,MAAK,KAAAY,EAAAC,EAAAd,QAbvBK,EAAAC,EAAA,YAAAhB,OAAiBA,EAAK,UACpBe,EAAAC,EAAA,cAAAhB,KAAKiB,oEANvBjB,EAAS,wBAAdyB,OAAIC,GAAA,sLAFVzB,EAyBKC,EAAAyB,EAAAvB,GAxBHC,EAuBIsB,EAAAC,mFAtBK5B,EAAS,WAAdyB,OAAIC,GAAA,EAAA,iHAAJD,gDAnBKjB,EACPC,EACAoB,UAEIA,EAAQ,GAAYpB,kBAAQ,GACjBA,iFAfNqB,GAAaC,YACbC,GAAgBD,EAIvBE,EAAmB,IAAAC,EACrBC,IACAC,cAWOC,EAAWC,EAAYC,GAC9BC,EAAA,EAAAC,EAAeH,GACfL,EAAaS,SAAS,gBACpB,CAAAJ,QACAC,2HApBHC,EAAA,EAAEG,EAAYb,EAASc,KAAKC,MAAMf,GAAK,mBACvCU,EAAA,EAAEC,EAAeT,EAAWc,OAAOd,GAAY,yBAiCxBK,EAAWC,EAAOC"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/menu/Menu.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { menuType } from './menu.types';\n  export let items: string;\n  export let selected: string;\n  $: menuItems = items ? (JSON.parse(items) as menuType[]) : [];\n  $: itemSelected = selected ? Number(selected) : '';\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function generateIconName(\n    iconName: string | undefined,\n    isActive: boolean,\n  ): string {\n    if (isActive) return `${iconName} fill=\"white\" `;\n    else return `${iconName} `;\n  }\n\n  function manageMenu(index: any, item: any) {\n    itemSelected = index;\n    eventHandler.dispatch('item-selected', {\n      index,\n      item,\n    });\n  }\n</script>\n\n<nav class=\"mc-menu\" aria-label=\"menu\">\n  <ul class=\"mc-menu__list\">\n    {#each menuItems as item, index}\n      <li class=\"mc-menu__item\">\n        <!-- svelte-ignore a11y-click-events-have-key-events -->\n        <div\n          class=\"mc-menu__link\"\n          class:is-active={itemSelected === index}\n          class:is-disabled={item.disabled}\n          on:click={() => manageMenu(index, item)}\n        >\n          {#if item.iconName}\n            <span class=\"mc-menu__icon\">\n              {@html `<${generateIconName(\n                item.iconName,\n                itemSelected === index,\n              )} />`}\n            </span>\n          {/if}\n          {#if $$slots.icon}\n            <span class=\"mc-menu__icon\"><slot prop={item} name=\"icon\" /></span>\n          {/if}\n          {#if item.iconPath}\n            <svg\n              class=\"mc-menu__icon\"\n              fill={itemSelected === index ? 'white' : ''}\n              style=\"width: 2rem\"\n            >\n              <use href={item.iconPath} />\n            </svg>\n          {/if}\n          <span class=\"mc-menu__label\">{item.label}</span>\n        </div>\n      </li>\n    {/each}\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.menu';\n</style>\n"],"names":["raw_value","generateIconName","ctx","iconName","insert","target","span","anchor","dirty","innerHTML","append","slot","attr","use","use_href_value","iconPath","svg","svg_fill_value","t3_value","label","if_block0","create_if_block_2","if_block1","icon","create_if_block_1","if_block2","create_if_block","toggle_class","div","disabled","li","set_data","t3","length","i","nav","ul","isActive","items","$$props","selected","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageMenu","index","item","$$invalidate","itemSelected","dispatch","menuItems","JSON","parse","Number"],"mappings":"4UAiDyBA,EAAA,IAAAC,EACTC,EAAI,GAACC,SACLD,OAAiBA,EAAK,sEAH1BE,EAKMC,EAAAC,EAAAC,yBAJO,EAAAC,GAAAR,KAAAA,EAAA,IAAAC,EACTC,EAAI,GAACC,SACLD,OAAiBA,EAAK,aAAAI,EAAAG,UAAAT,2FAKcE,EAAI,4DAA5CE,EAAkEC,EAAAC,EAAAC,GAAtCG,EAAgCJ,EAAAK,uBAApBT,EAAI,8FAQ/BU,EAAAC,EAAA,OAAAC,EAAAZ,KAAKa,uCAHVH,EAAAI,EAAA,OAAAC,EAAAf,OAAiBA,EAAK,IAAG,QAAU,gCAF3CE,EAMKC,EAAAW,EAAAT,GADHG,EAA2BM,EAAAH,WAAhB,EAAAL,GAAAM,KAAAA,EAAAZ,KAAKa,yBAHV,EAAAP,GAAAS,KAAAA,EAAAf,OAAiBA,EAAK,IAAG,QAAU,yEAMfgB,EAAAhB,KAAKiB,MAAK,GApBnCC,EAAAlB,KAAKC,UAAQkB,EAAAnB,GAQboB,EAAApB,KAAQqB,MAAIC,EAAAtB,GAGZuB,EAAAvB,KAAKa,UAAQW,EAAAxB,yMAfDyB,EAAAC,EAAA,YAAA1B,OAAiBA,EAAK,KACpByB,EAAAC,EAAA,cAAA1B,KAAK2B,+CAL5BzB,EA8BIC,EAAAyB,EAAAvB,GA5BFG,EA2BKoB,EAAAF,qEADHlB,EAA+CkB,EAAAtB,6DApBrCH,+DAQLD,KAAQqB,2DAGRrB,KAAKa,+DASoB,EAAAP,GAAAU,KAAAA,EAAAhB,KAAKiB,MAAK,KAAAY,EAAAC,EAAAd,QAxBvBS,EAAAC,EAAA,YAAA1B,OAAiBA,EAAK,UACpByB,EAAAC,EAAA,cAAA1B,KAAK2B,sFANvB3B,EAAS,wBAAd+B,OAAIC,GAAA,sLAFV9B,EAoCKC,EAAA8B,EAAA5B,GAnCHG,EAkCIyB,EAAAC,mFAjCKlC,EAAS,WAAd+B,OAAIC,GAAA,EAAA,iHAAJD,gDAnBKhC,EACPE,EACAkC,UAEIA,EAAQ,GAAYlC,kBAAQ,GACjBA,iFAfNmC,GAAaC,YACbC,GAAgBD,EAIvBE,EAAmB,IAAAC,EACrBC,IACAC,cAWOC,EAAWC,EAAYC,GAC9BC,EAAA,EAAAC,EAAeH,GACfL,EAAaS,SAAS,gBACpB,CAAAJ,QACAC,2HApBHC,EAAA,EAAEG,EAAYb,EAASc,KAAKC,MAAMf,GAAK,mBACvCU,EAAA,EAAEC,EAAeT,EAAWc,OAAOd,GAAY,yBAiCxBK,EAAWC,EAAOC"}

package/public/components/menu/Menu.svelte

@@ -45,15 +45,26 @@
           class:is-disabled={item.disabled}
           on:click={() => manageMenu(index, item)}
         >
-          <span class="mc-menu__icon">
-            {@html `<${generateIconName(
-              item.iconName,
-              itemSelected === index,
-            )} />`}
-          </span>
+          {#if item.iconName}
+            <span class="mc-menu__icon">
+              {@html `<${generateIconName(
+                item.iconName,
+                itemSelected === index,
+              )} />`}
+            </span>
+          {/if}
           {#if $$slots.icon}
             <span class="mc-menu__icon"><slot prop={item} name="icon" /></span>
           {/if}
+          {#if item.iconPath}
+            <svg
+              class="mc-menu__icon"
+              fill={itemSelected === index ? 'white' : ''}
+              style="width: 2rem"
+            >
+              <use href={item.iconPath} />
+            </svg>
+          {/if}
           <span class="mc-menu__label">{item.label}</span>
         </div>
       </li>

package/public/components/menu/menu.types.d.ts

@@ -1,4 +1,5 @@
 export interface menuType {
+    iconPath?: string | undefined;
     label: string;
     id?: string | undefined;
     iconName?: string | undefined;

package/public/components/menu/menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC"}
+{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC"}

package/public/components/tag/Tag.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as o,b as a,f as i,s,d as r,T as n,n as m,m as l,o as b,q as d,r as p,c as w,u as c,e as h,v as x,h as f,j as g,k,y as u,l as v,N as y,x as _,a3 as z,P as $}from"../../index-c222d0b7.js";import{E as L}from"../../EventHandler-f7ee47ca.js";import{c as M}from"../../EventForward-c4c8cd29.js";function E(e){let t,o,i,s,r,n=[{class:r=N(e[3],e[2],e[1])+" "+e[10]},e[8]],m={};for(let e=0;e<n.length;e+=1)m=w(m,n[e]);return{c(){t=h("span"),o=h("span"),i=x(e[0]),f(o,"class",s=R(e[3],"label")),g(t,m)},m(e,s){a(e,t,s),k(t,o),k(o,i)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=R(e[3],"label"))&&f(o,"class",s),g(t,m=v(n,[1038&a&&r!==(r=N(e[3],e[2],e[1])+" "+e[10])&&{class:r},256&a&&e[8]]))},d(e){e&&l(t)}}}function C(e){let t,o,i,s,r,n=[{href:e[6]},{class:r=N(e[3],e[2],e[1])+" "+e[10]},e[8]],m={};for(let e=0;e<n.length;e+=1)m=w(m,n[e]);return{c(){t=h("a"),o=h("span"),i=x(e[0]),f(o,"class",s=R(e[3],"label")),g(t,m)},m(e,s){a(e,t,s),k(t,o),k(o,i)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=R(e[3],"label"))&&f(o,"class",s),g(t,m=v(n,[64&a&&{href:e[6]},1038&a&&r!==(r=N(e[3],e[2],e[1])+" "+e[10])&&{class:r},256&a&&e[8]]))},d(e){e&&l(t)}}}function A(e){let t,o,i,s,n,m,b,d,p,c,L,M,E=[{class:c=N(e[3],e[2],e[1])+" "+e[10]},e[8]],C={};for(let e=0;e<E.length;e+=1)C=w(C,E[e]);return{c(){t=h("span"),o=h("input"),s=r(),n=h("label"),m=h("span"),b=x(e[0]),f(o,"class",i=R(e[3],"input")),f(o,"type","checkbox"),f(o,"name",e[7]),f(o,"id",e[5]),o.disabled=e[4],f(m,"class",d=R(e[3],"label")),f(n,"class",p=R(e[3],"pill")),f(n,"for",e[5]),g(t,C)},m(i,r){a(i,t,r),k(t,o),o.checked=e[9],k(t,s),k(t,n),k(n,m),k(m,b),L||(M=[y(e[11].call(null,o)),_(o,"change",e[16]),_(t,"click",z(e[12]))],L=!0)},p(e,a){8&a&&i!==(i=R(e[3],"input"))&&f(o,"class",i),128&a&&f(o,"name",e[7]),32&a&&f(o,"id",e[5]),16&a&&(o.disabled=e[4]),512&a&&(o.checked=e[9]),1&a&&u(b,e[0]),8&a&&d!==(d=R(e[3],"label"))&&f(m,"class",d),8&a&&p!==(p=R(e[3],"pill"))&&f(n,"class",p),32&a&&f(n,"for",e[5]),g(t,C=v(E,[1038&a&&c!==(c=N(e[3],e[2],e[1])+" "+e[10])&&{class:c},256&a&&e[8]]))},d(e){e&&l(t),L=!1,$(M)}}}function B(e){let t,o,i,s,n,m,b,d,p,c,y,$,L,M=[{class:y=N(e[3],e[2],e[1])+" "+e[10]},e[8]],E={};for(let e=0;e<M.length;e+=1)E=w(E,M[e]);return{c(){t=h("span"),o=h("span"),i=x(e[0]),n=r(),m=h("button"),b=h("span"),d=x(e[0]),f(o,"class",s=R(e[3],"label")),f(b,"class",p=R(e[3],"remove-text")),f(m,"class",c=R(e[3],"remove")),g(t,E)},m(s,r){a(s,t,r),k(t,o),k(o,i),k(t,n),k(t,m),k(m,b),k(b,d),$||(L=_(m,"click",z(e[13])),$=!0)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=R(e[3],"label"))&&f(o,"class",s),1&a&&u(d,e[0]),8&a&&p!==(p=R(e[3],"remove-text"))&&f(b,"class",p),8&a&&c!==(c=R(e[3],"remove"))&&f(m,"class",c),g(t,E=v(M,[1038&a&&y!==(y=N(e[3],e[2],e[1])+" "+e[10])&&{class:y},256&a&&e[8]]))},d(e){e&&l(t),$=!1,L()}}}function j(e){let t,o,i,s,b="text"===e[3]&&E(e),d="link"===e[3]&&C(e),p="selectable"===e[3]&&A(e),w="removable"===e[3]&&B(e);return{c(){b&&b.c(),t=r(),d&&d.c(),o=r(),p&&p.c(),i=r(),w&&w.c(),s=n(),this.c=m},m(e,r){b&&b.m(e,r),a(e,t,r),d&&d.m(e,r),a(e,o,r),p&&p.m(e,r),a(e,i,r),w&&w.m(e,r),a(e,s,r)},p(e,[a]){"text"===e[3]?b?b.p(e,a):(b=E(e),b.c(),b.m(t.parentNode,t)):b&&(b.d(1),b=null),"link"===e[3]?d?d.p(e,a):(d=C(e),d.c(),d.m(o.parentNode,o)):d&&(d.d(1),d=null),"selectable"===e[3]?p?p.p(e,a):(p=A(e),p.c(),p.m(i.parentNode,i)):p&&(p.d(1),p=null),"removable"===e[3]?w?w.p(e,a):(w=B(e),w.c(),w.m(s.parentNode,s)):w&&(w.d(1),w=null)},i:m,o:m,d(e){b&&b.d(e),e&&l(t),d&&d.d(e),e&&l(o),p&&p.d(e),e&&l(i),w&&w.d(e),e&&l(s)}}}function N(e,t,o){const a=[`mc-tag-${e}`];return o&&a.push(`mc-tag-${e}--${o}`),t&&a.push(`mc-tag-${e}--dark`),a.join(" ")}function R(e,t){return`mc-tag-${e}__${t}`}function q(e,t,o){let a,i,s;const r=["label","size","dark","type","disabled","id","href","name","value","selected"];let n=b(t,r),{label:m}=t,{size:l="m"}=t,{dark:h}=t,{type:x="text"}=t,{disabled:f}=t,{id:g}=t,{href:k}=t,{name:u}=t,{value:v}=t,{selected:y=!1}=t;const _=M(d());let z=new L(d(),p());return e.$$set=e=>{o(19,t=w(w({},t),c(e))),o(18,n=b(t,r)),"label"in e&&o(0,m=e.label),"size"in e&&o(1,l=e.size),"dark"in e&&o(2,h=e.dark),"type"in e&&o(3,x=e.type),"disabled"in e&&o(4,f=e.disabled),"id"in e&&o(5,g=e.id),"href"in e&&o(6,k=e.href),"name"in e&&o(7,u=e.name),"value"in e&&o(14,v=e.value),"selected"in e&&o(15,y=e.selected)},e.$$.update=()=>{32768&e.$$.dirty&&o(9,a=!!y),o(10,i=t.class),o(8,s=Object.assign({},n)),256&e.$$.dirty&&delete s.class},t=c(t),[m,l,h,x,f,g,k,u,s,a,i,_,function(){o(9,a=!a),z.dispatch("tag-selected",a)},function(){z.dispatch("tag-removed",{id:g,label:m,value:v})},v,y,function(){a=this.checked,o(9,a),o(15,y)}]}class F extends e{constructor(e){super();const r=document.createElement("style");r.textContent='.mc-tag-text{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background:#ffffff;color:#191919;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080}.mc-tag-text::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-text--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-text--dark{background:#191919;color:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #ffffff;box-shadow:inset 0 0 0 1px #ffffff}.mc-tag-link{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;text-decoration:none;outline:none;background:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080;color:#191919}.mc-tag-link::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link:hover{background:#e6e6e6}.mc-tag-link:active{background:#cccccc}.mc-tag-link:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-link--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--dark{background:#191919;color:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #ffffff;box-shadow:inset 0 0 0 1px #ffffff}.mc-tag-link--dark:hover{background:#333333}.mc-tag-link--dark:active{background:#4d4d4d}.mc-tag-selectable{display:inline-block;white-space:nowrap}.mc-tag-selectable__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-tag-selectable__input:checked+.mc-tag-selectable__pill{background:#188803;-webkit-box-shadow:inset 0 0 0 1px #188803;box-shadow:inset 0 0 0 1px #188803;color:#ffffff}.mc-tag-selectable__input:checked+.mc-tag-selectable__pill:hover{background:#006902;-webkit-box-shadow:inset 0 0 0 1px #006902;box-shadow:inset 0 0 0 1px #006902}.mc-tag-selectable__input:focus+.mc-tag-selectable__pill::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-selectable__input:disabled+.mc-tag-selectable__pill{cursor:not-allowed;background:#e6e6e6;color:#808080}.mc-tag-selectable__label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;background:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080;color:#191919;cursor:pointer}.mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable__pill:hover{background:#9ed05f}.mc-tag-selectable__pill:active{background:#035010;-webkit-box-shadow:inset 0 0 0 1px #035010;box-shadow:inset 0 0 0 1px #035010;color:#ffffff}.mc-tag-selectable--dark .mc-tag-selectable__pill{background:#191919;color:#ffffff;cursor:pointer}.mc-tag-selectable--dark .mc-tag-selectable__pill:hover{background:#006902}.mc-tag-selectable--dark .mc-tag-selectable__pill:active{background:#c5e39e;-webkit-box-shadow:inset 0 0 0 1px #c5e39e;box-shadow:inset 0 0 0 1px #c5e39e;color:#191919}.mc-tag-selectable--dark .mc-tag-selectable__input:checked+.mc-tag-selectable__pill{background:#78be20;-webkit-box-shadow:inset 0 0 0 1px #78be20;box-shadow:inset 0 0 0 1px #78be20;color:#191919}.mc-tag-selectable--dark .mc-tag-selectable__input:checked+.mc-tag-selectable__pill:hover{background:#9ed05f}.mc-tag-selectable--dark .mc-tag-selectable__input:disabled+.mc-tag-selectable__pill{cursor:not-allowed;background:#4d4d4d;color:#808080}.mc-tag-selectable--s .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0;background-color:#333333;color:#ffffff}.mc-tag-removable::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}.mc-tag-removable--dark{background-color:#cccccc;color:#191919}.mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable__remove{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E");position:relative;background-color:#333333;margin:0;display:block;border-radius:50%;background-repeat:no-repeat;background-position:center}.mc-tag-removable__remove::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:50%;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable__remove-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-tag-removable__remove:hover{background-color:#4d4d4d}.mc-tag-removable__remove:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-removable__remove:active{background-color:#666666}.mc-tag-removable--dark .mc-tag-removable__remove{background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23191919\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E");background-color:#cccccc}.mc-tag-removable--dark .mc-tag-removable__remove:hover{background-color:#b3b3b3}.mc-tag-removable--dark .mc-tag-removable__remove:active{background-color:#999999}.mc-tag-list{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.mc-tag-list__item{margin:0 1rem 1rem 0}@media screen and (min-width: 680px){.mc-tag-text--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-m .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-m .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-m .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-m .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1024px){.mc-tag-text--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-l .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-l .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-l .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-l .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1280px){.mc-tag-text--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xl .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-xl .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-xl .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-xl .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1920px){.mc-tag-text--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xxl .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-xxl .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}',this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:o(this.attributes),customElement:!0},q,j,s,{label:0,size:1,dark:2,type:3,disabled:4,id:5,href:6,name:7,value:14,selected:15},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["label","size","dark","type","disabled","id","href","name","value","selected"]}get label(){return this.$$.ctx[0]}set label(e){this.$$set({label:e}),i()}get size(){return this.$$.ctx[1]}set size(e){this.$$set({size:e}),i()}get dark(){return this.$$.ctx[2]}set dark(e){this.$$set({dark:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get disabled(){return this.$$.ctx[4]}set disabled(e){this.$$set({disabled:e}),i()}get id(){return this.$$.ctx[5]}set id(e){this.$$set({id:e}),i()}get href(){return this.$$.ctx[6]}set href(e){this.$$set({href:e}),i()}get name(){return this.$$.ctx[7]}set name(e){this.$$set({name:e}),i()}get value(){return this.$$.ctx[14]}set value(e){this.$$set({value:e}),i()}get selected(){return this.$$.ctx[15]}set selected(e){this.$$set({selected:e}),i()}}export{F as default};
+import{S as e,i as t,a as o,b as a,f as i,s,d as r,T as n,n as m,m as l,o as b,q as d,r as p,c as w,u as c,e as h,v as x,h as f,j as g,k,y as u,l as v,x as y,Q as _}from"../../index-c222d0b7.js";import{E as z}from"../../EventHandler-f7ee47ca.js";function $(e){let t,o,i,s,r,n=[{class:r=A(e[3],e[2],e[1])+" "+e[10]},e[8]],m={};for(let e=0;e<n.length;e+=1)m=w(m,n[e]);return{c(){t=h("span"),o=h("span"),i=x(e[0]),f(o,"class",s=B(e[3],"label")),g(t,m)},m(e,s){a(e,t,s),k(t,o),k(o,i)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=B(e[3],"label"))&&f(o,"class",s),g(t,m=v(n,[1038&a&&r!==(r=A(e[3],e[2],e[1])+" "+e[10])&&{class:r},256&a&&e[8]]))},d(e){e&&l(t)}}}function L(e){let t,o,i,s,r,n,m,b=[{href:e[6]},{class:r=A(e[3],e[2],e[1])+" "+e[10]},e[8]],d={};for(let e=0;e<b.length;e+=1)d=w(d,b[e]);return{c(){t=h("a"),o=h("span"),i=x(e[0]),f(o,"class",s=B(e[3],"label")),g(t,d)},m(s,r){a(s,t,r),k(t,o),k(o,i),n||(m=y(t,"click",_(e[11])),n=!0)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=B(e[3],"label"))&&f(o,"class",s),g(t,d=v(b,[64&a&&{href:e[6]},1038&a&&r!==(r=A(e[3],e[2],e[1])+" "+e[10])&&{class:r},256&a&&e[8]]))},d(e){e&&l(t),n=!1,m()}}}function M(e){let t,o,i,s,n,m,b,d,p,c,z,$,L=[{class:c=A(e[3],e[2],e[1])+" "+e[10]},e[8]],M={};for(let e=0;e<L.length;e+=1)M=w(M,L[e]);return{c(){t=h("span"),o=h("input"),s=r(),n=h("label"),m=h("span"),b=x(e[0]),f(o,"class",i=B(e[3],"input")),f(o,"type","checkbox"),f(o,"name",e[7]),o.checked=e[9],f(o,"id",e[5]),o.disabled=e[4],f(m,"class",d=B(e[3],"label")),f(n,"class",p=B(e[3],"pill")),f(n,"for",e[5]),g(t,M)},m(i,r){a(i,t,r),k(t,o),k(t,s),k(t,n),k(n,m),k(m,b),z||($=y(t,"click",_(e[11])),z=!0)},p(e,a){8&a&&i!==(i=B(e[3],"input"))&&f(o,"class",i),128&a&&f(o,"name",e[7]),512&a&&(o.checked=e[9]),32&a&&f(o,"id",e[5]),16&a&&(o.disabled=e[4]),1&a&&u(b,e[0]),8&a&&d!==(d=B(e[3],"label"))&&f(m,"class",d),8&a&&p!==(p=B(e[3],"pill"))&&f(n,"class",p),32&a&&f(n,"for",e[5]),g(t,M=v(L,[1038&a&&c!==(c=A(e[3],e[2],e[1])+" "+e[10])&&{class:c},256&a&&e[8]]))},d(e){e&&l(t),z=!1,$()}}}function E(e){let t,o,i,s,n,m,b,d,p,c,z,$,L,M=[{class:z=A(e[3],e[2],e[1])+" "+e[10]},e[8]],E={};for(let e=0;e<M.length;e+=1)E=w(E,M[e]);return{c(){t=h("span"),o=h("span"),i=x(e[0]),n=r(),m=h("button"),b=h("span"),d=x(e[0]),f(o,"class",s=B(e[3],"label")),f(b,"class",p=B(e[3],"remove-text")),f(m,"class",c=B(e[3],"remove")),g(t,E)},m(s,r){a(s,t,r),k(t,o),k(o,i),k(t,n),k(t,m),k(m,b),k(b,d),$||(L=y(m,"click",_(e[12])),$=!0)},p(e,a){1&a&&u(i,e[0]),8&a&&s!==(s=B(e[3],"label"))&&f(o,"class",s),1&a&&u(d,e[0]),8&a&&p!==(p=B(e[3],"remove-text"))&&f(b,"class",p),8&a&&c!==(c=B(e[3],"remove"))&&f(m,"class",c),g(t,E=v(M,[1038&a&&z!==(z=A(e[3],e[2],e[1])+" "+e[10])&&{class:z},256&a&&e[8]]))},d(e){e&&l(t),$=!1,L()}}}function C(e){let t,o,i,s,b="text"===e[3]&&$(e),d="link"===e[3]&&L(e),p="selectable"===e[3]&&M(e),w="removable"===e[3]&&E(e);return{c(){b&&b.c(),t=r(),d&&d.c(),o=r(),p&&p.c(),i=r(),w&&w.c(),s=n(),this.c=m},m(e,r){b&&b.m(e,r),a(e,t,r),d&&d.m(e,r),a(e,o,r),p&&p.m(e,r),a(e,i,r),w&&w.m(e,r),a(e,s,r)},p(e,[a]){"text"===e[3]?b?b.p(e,a):(b=$(e),b.c(),b.m(t.parentNode,t)):b&&(b.d(1),b=null),"link"===e[3]?d?d.p(e,a):(d=L(e),d.c(),d.m(o.parentNode,o)):d&&(d.d(1),d=null),"selectable"===e[3]?p?p.p(e,a):(p=M(e),p.c(),p.m(i.parentNode,i)):p&&(p.d(1),p=null),"removable"===e[3]?w?w.p(e,a):(w=E(e),w.c(),w.m(s.parentNode,s)):w&&(w.d(1),w=null)},i:m,o:m,d(e){b&&b.d(e),e&&l(t),d&&d.d(e),e&&l(o),p&&p.d(e),e&&l(i),w&&w.d(e),e&&l(s)}}}function A(e,t,o){const a=[`mc-tag-${e}`];return o&&a.push(`mc-tag-${e}--${o}`),t&&a.push(`mc-tag-${e}--dark`),a.join(" ")}function B(e,t){return`mc-tag-${e}__${t}`}function j(e,t,o){let a,i,s;const r=["label","size","dark","type","disabled","id","value","href","name","selected"];let n=b(t,r),{label:m}=t,{size:l="m"}=t,{dark:h}=t,{type:x="text"}=t,{disabled:f}=t,{id:g}=t,{value:k}=t,{href:u}=t,{name:v}=t,{selected:y=!1}=t,_=new z(d(),p());return e.$$set=e=>{o(17,t=w(w({},t),c(e))),o(16,n=b(t,r)),"label"in e&&o(0,m=e.label),"size"in e&&o(1,l=e.size),"dark"in e&&o(2,h=e.dark),"type"in e&&o(3,x=e.type),"disabled"in e&&o(4,f=e.disabled),"id"in e&&o(5,g=e.id),"value"in e&&o(13,k=e.value),"href"in e&&o(6,u=e.href),"name"in e&&o(7,v=e.name),"selected"in e&&o(14,y=e.selected)},e.$$.update=()=>{16384&e.$$.dirty&&o(9,a=!!y),o(10,i=t.class),o(8,s=Object.assign({},n)),256&e.$$.dirty&&delete s.class},t=c(t),[m,l,h,x,f,g,u,v,s,a,i,function(){o(9,a=!a),_.dispatch("tag-selected",a)},function(){_.dispatch("tag-removed",{id:g,label:m,value:k})},k,y]}class N extends e{constructor(e){super();const r=document.createElement("style");r.textContent='.mc-tag-text{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background:#ffffff;color:#191919;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080}.mc-tag-text::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-text--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-text--dark{background:#191919;color:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #ffffff;box-shadow:inset 0 0 0 1px #ffffff}.mc-tag-link{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;text-decoration:none;outline:none;background:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080;color:#191919}.mc-tag-link::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link:hover{background:#e6e6e6}.mc-tag-link:active{background:#cccccc}.mc-tag-link:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-link--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--dark{background:#191919;color:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #ffffff;box-shadow:inset 0 0 0 1px #ffffff}.mc-tag-link--dark:hover{background:#333333}.mc-tag-link--dark:active{background:#4d4d4d}.mc-tag-selectable{display:inline-block;white-space:nowrap}.mc-tag-selectable__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-tag-selectable__input:checked+.mc-tag-selectable__pill{background:#188803;-webkit-box-shadow:inset 0 0 0 1px #188803;box-shadow:inset 0 0 0 1px #188803;color:#ffffff}.mc-tag-selectable__input:checked+.mc-tag-selectable__pill:hover{background:#006902;-webkit-box-shadow:inset 0 0 0 1px #006902;box-shadow:inset 0 0 0 1px #006902}.mc-tag-selectable__input:focus+.mc-tag-selectable__pill::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-selectable__input:disabled+.mc-tag-selectable__pill{cursor:not-allowed;background:#e6e6e6;color:#808080}.mc-tag-selectable__label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;background:#ffffff;-webkit-box-shadow:inset 0 0 0 1px #808080;box-shadow:inset 0 0 0 1px #808080;color:#191919;cursor:pointer}.mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable__pill:hover{background:#9ed05f}.mc-tag-selectable__pill:active{background:#035010;-webkit-box-shadow:inset 0 0 0 1px #035010;box-shadow:inset 0 0 0 1px #035010;color:#ffffff}.mc-tag-selectable--dark .mc-tag-selectable__pill{background:#191919;color:#ffffff;cursor:pointer}.mc-tag-selectable--dark .mc-tag-selectable__pill:hover{background:#006902}.mc-tag-selectable--dark .mc-tag-selectable__pill:active{background:#c5e39e;-webkit-box-shadow:inset 0 0 0 1px #c5e39e;box-shadow:inset 0 0 0 1px #c5e39e;color:#191919}.mc-tag-selectable--dark .mc-tag-selectable__input:checked+.mc-tag-selectable__pill{background:#78be20;-webkit-box-shadow:inset 0 0 0 1px #78be20;box-shadow:inset 0 0 0 1px #78be20;color:#191919}.mc-tag-selectable--dark .mc-tag-selectable__input:checked+.mc-tag-selectable__pill:hover{background:#9ed05f}.mc-tag-selectable--dark .mc-tag-selectable__input:disabled+.mc-tag-selectable__pill{cursor:not-allowed;background:#4d4d4d;color:#808080}.mc-tag-selectable--s .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0;background-color:#333333;color:#ffffff}.mc-tag-removable::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}.mc-tag-removable--dark{background-color:#cccccc;color:#191919}.mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable__remove{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E");position:relative;background-color:#333333;margin:0;display:block;border-radius:50%;background-repeat:no-repeat;background-position:center}.mc-tag-removable__remove::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:50%;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable__remove-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-tag-removable__remove:hover{background-color:#4d4d4d}.mc-tag-removable__remove:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-tag-removable__remove:active{background-color:#666666}.mc-tag-removable--dark .mc-tag-removable__remove{background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23191919\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E");background-color:#cccccc}.mc-tag-removable--dark .mc-tag-removable__remove:hover{background-color:#b3b3b3}.mc-tag-removable--dark .mc-tag-removable__remove:active{background-color:#999999}.mc-tag-list{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.mc-tag-list__item{margin:0 1rem 1rem 0}@media screen and (min-width: 680px){.mc-tag-text--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-m .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-m .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-m::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-m .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-m .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1024px){.mc-tag-text--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-l .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-l .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-l::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-l .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-l .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1280px){.mc-tag-text--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xl .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-xl .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-xl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-xl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-xl .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-xl .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}@media screen and (min-width: 1920px){.mc-tag-text--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-text--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-link--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-link--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:0.75rem;padding:0.1875rem 1rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--s\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:0.875rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--s\\@from-xxl .mc-tag-removable__label{padding:0.1875rem 0.25rem 0.1875rem 1rem}.mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove{width:1.5rem;height:1.5rem;background-size:1rem}.mc-tag-removable--m\\@from-xxl{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.2857142857;border-radius:1.25rem;padding:0.6875rem 1.5rem;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0}.mc-tag-removable--m\\@from-xxl::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:1.375rem;top:-0.125rem;right:-0.125rem;bottom:-0.125rem;left:-0.125rem}.mc-tag-removable--m\\@from-xxl .mc-tag-removable__label{padding:0.6875rem 0.5rem 0.6875rem 1.5rem}.mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove{width:2.5rem;height:2.5rem;background-size:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'1.5rem\' width=\'1.5rem\' fill=\'%23cccccc\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.14 12.7a1 1 0 0 1-1.41 1.42l-2.68-2.68-2.78 2.77a1 1 0 1 1-1.41-1.42L10.63 12 7.79 9.21a1 1 0 1 1 1.42-1.42l2.84 2.83 2.74-2.74a1 1 0 1 1 1.42 1.42L13.46 12z\'/%3E%3C/svg%3E")}}',this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:o(this.attributes),customElement:!0},j,C,s,{label:0,size:1,dark:2,type:3,disabled:4,id:5,value:13,href:6,name:7,selected:14},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["label","size","dark","type","disabled","id","value","href","name","selected"]}get label(){return this.$$.ctx[0]}set label(e){this.$$set({label:e}),i()}get size(){return this.$$.ctx[1]}set size(e){this.$$set({size:e}),i()}get dark(){return this.$$.ctx[2]}set dark(e){this.$$set({dark:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get disabled(){return this.$$.ctx[4]}set disabled(e){this.$$set({disabled:e}),i()}get id(){return this.$$.ctx[5]}set id(e){this.$$set({id:e}),i()}get value(){return this.$$.ctx[13]}set value(e){this.$$set({value:e}),i()}get href(){return this.$$.ctx[6]}set href(e){this.$$set({href:e}),i()}get name(){return this.$$.ctx[7]}set name(e){this.$$set({name:e}),i()}get selected(){return this.$$.ctx[14]}set selected(e){this.$$set({selected:e}),i()}}export{N as default};
 //# sourceMappingURL=Tag.js.map

package/public/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import type { TagSize, TagType } from './tag.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n\n  export let label: string;\n  export let size: TagSize = 'm';\n  export let dark: boolean;\n  export let type: TagType = 'text';\n  export let disabled: boolean;\n  export let id: string;\n  export let href: string;\n  export let name: string;\n  export let value: string | undefined;\n  export let selected = false;\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: isSelected = selected ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function getClasses(type: TagType, dark: boolean, size: TagSize) {\n    const classes = [`mc-tag-${type}`];\n\n    if (size) {\n      classes.push(`mc-tag-${type}--${size}`);\n    }\n\n    if (dark) {\n      classes.push(`mc-tag-${type}--dark`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function getSubClasses(type: TagType, element: string) {\n    return `mc-tag-${type}__${element}`;\n  }\n\n  function onSelect(): void {\n    isSelected = !isSelected;\n    eventHandler.dispatch('tag-selected', isSelected);\n  }\n\n  function onRemoved(): void {\n    eventHandler.dispatch('tag-removed', {\n      id,\n      label,\n      value,\n    });\n  }\n</script>\n\n{#if type === 'text'}\n  <span class=\"{getClasses(type, dark, size)}  {userClass}\" {...attributes}>\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n  </span>\n{/if}\n{#if type === 'link'}\n  <a {href} class=\"{getClasses(type, dark, size)}  {userClass}\" {...attributes}>\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n  </a>\n{/if}\n{#if type === 'selectable'}\n  <span\n    class=\"{getClasses(type, dark, size)}  {userClass}\"\n    on:click|preventDefault={onSelect}\n    {...attributes}\n  >\n    <input\n      use:forwardEvents\n      class={getSubClasses(type, 'input')}\n      type=\"checkbox\"\n      {name}\n      bind:checked={isSelected}\n      {id}\n      {disabled}\n    />\n    <label class={getSubClasses(type, 'pill')} for={id}>\n      <span class={getSubClasses(type, 'label')}>\n        {label}\n      </span>\n    </label>\n  </span>\n{/if}\n{#if type === 'removable'}\n  <span class=\"{getClasses(type, dark, size)}  {userClass}\" {...attributes}>\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n    <button\n      class={getSubClasses(type, 'remove')}\n      on:click|preventDefault={onRemoved}\n    >\n      <span class={getSubClasses(type, 'remove-text')}> {label} </span>\n    </button>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.tag';\n</style>\n"],"names":["class","span1_class_value","getClasses","ctx","getSubClasses","insert","target","span1","anchor","append","span0","dirty","a_class_value","a","span","input","label_1","span2_class_value","span2","button","if_block0","create_if_block_3","if_block1","create_if_block_2","if_block2","create_if_block_1","if_block3","create_if_block","type","dark","size","classes","push","join","element","label","$$props","disabled","id","href","name","value","selected","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","createEventDispatcher","isSelected","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch","this","checked"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import type { TagSize, TagType } from './tag.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let label: string;\n  export let size: TagSize = 'm';\n  export let dark: boolean;\n  export let type: TagType = 'text';\n  export let disabled: boolean;\n  export let id: string;\n  export let value: string | undefined = undefined;\n  export let href: string | undefined = undefined;\n  export let name: string | undefined = undefined;\n  export let selected = false;\n\n  $: isSelected = selected ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function getClasses(type: TagType, dark: boolean, size: TagSize) {\n    const classes = [`mc-tag-${type}`];\n\n    if (size) {\n      classes.push(`mc-tag-${type}--${size}`);\n    }\n\n    if (dark) {\n      classes.push(`mc-tag-${type}--dark`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function getSubClasses(type: TagType, element: string) {\n    return `mc-tag-${type}__${element}`;\n  }\n\n  function onSelect(): void {\n    isSelected = !isSelected;\n    eventHandler.dispatch('tag-selected', isSelected);\n  }\n\n  function onRemoved(): void {\n    eventHandler.dispatch('tag-removed', {\n      id,\n      label,\n      value,\n    });\n  }\n</script>\n\n{#if type === 'text'}\n  <span class=\"{getClasses(type, dark, size)}  {userClass}\" {...attributes}>\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n  </span>\n{/if}\n{#if type === 'link'}\n  <a\n    {href}\n    class=\"{getClasses(type, dark, size)} {userClass}\"\n    {...attributes}\n    on:click|stopPropagation={onSelect}\n  >\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n  </a>\n{/if}\n{#if type === 'selectable'}\n  <span\n    class=\"{getClasses(type, dark, size)}  {userClass}\"\n    on:click|stopPropagation={onSelect}\n    {...attributes}\n  >\n    <input\n      class={getSubClasses(type, 'input')}\n      type=\"checkbox\"\n      {name}\n      checked={isSelected}\n      {id}\n      {disabled}\n    />\n    <label class={getSubClasses(type, 'pill')} for={id}>\n      <span class={getSubClasses(type, 'label')}>\n        {label}\n      </span>\n    </label>\n  </span>\n{/if}\n{#if type === 'removable'}\n  <span class=\"{getClasses(type, dark, size)}  {userClass}\" {...attributes}>\n    <span class={getSubClasses(type, 'label')}>\n      {label}\n    </span>\n    <button\n      class={getSubClasses(type, 'remove')}\n      on:click|stopPropagation={onRemoved}\n    >\n      <span class={getSubClasses(type, 'remove-text')}> {label} </span>\n    </button>\n  </span>\n{/if}\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.tag';\n</style>\n"],"names":["class","span1_class_value","getClasses","ctx","getSubClasses","insert","target","span1","anchor","append","span0","dirty","a_class_value","a","span","input","label_1","span2_class_value","span2","button","if_block0","create_if_block_3","if_block1","create_if_block_2","if_block2","create_if_block_1","if_block3","create_if_block","type","dark","size","classes","push","join","element","label","$$props","disabled","id","value","href","name","selected","eventHandler","EventHandler","get_current_component","createEventDispatcher","isSelected","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch"],"mappings":"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"}

package/public/components/tag/Tag.svelte

@@ -7,7 +7,6 @@
   } from 'svelte/internal';
   import type { TagSize, TagType } from './tag.types';
   import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
 
   export let label: string;
   export let size: TagSize = 'm';
@@ -15,11 +14,10 @@
   export let type: TagType = 'text';
   export let disabled: boolean;
   export let id: string;
-  export let href: string;
-  export let name: string;
-  export let value: string | undefined;
+  export let value: string | undefined = undefined;
+  export let href: string | undefined = undefined;
+  export let name: string | undefined = undefined;
   export let selected = false;
-  const forwardEvents = createEventForwarder(get_current_component());
 
   $: isSelected = selected ? true : false;
   $: userClass = $$props.class;
@@ -71,7 +69,12 @@
   </span>
 {/if}
 {#if type === 'link'}
-  <a {href} class="{getClasses(type, dark, size)}  {userClass}" {...attributes}>
+  <a
+    {href}
+    class="{getClasses(type, dark, size)} {userClass}"
+    {...attributes}
+    on:click|stopPropagation={onSelect}
+  >
     <span class={getSubClasses(type, 'label')}>
       {label}
     </span>
@@ -80,15 +83,14 @@
 {#if type === 'selectable'}
   <span
     class="{getClasses(type, dark, size)}  {userClass}"
-    on:click|preventDefault={onSelect}
+    on:click|stopPropagation={onSelect}
     {...attributes}
   >
     <input
-      use:forwardEvents
       class={getSubClasses(type, 'input')}
       type="checkbox"
       {name}
-      bind:checked={isSelected}
+      checked={isSelected}
       {id}
       {disabled}
     />
@@ -106,7 +108,7 @@
     </span>
     <button
       class={getSubClasses(type, 'remove')}
-      on:click|preventDefault={onRemoved}
+      on:click|stopPropagation={onRemoved}
     >
       <span class={getSubClasses(type, 'remove-text')}> {label} </span>
     </button>

package/public/utilities/components/menu/menu.types.d.ts

@@ -1,4 +1,5 @@
 export interface menuType {
+    iconPath?: string | undefined;
     label: string;
     id?: string | undefined;
     iconName?: string | undefined;

package/public/utilities/components/menu/menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC"}
+{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC"}

package/public/utilities/stories/button/Button.stories.d.ts

@@ -7,4 +7,5 @@ export declare const IconLeft: Story<import("@storybook/types").Args>;
 export declare const IconRight: Story<import("@storybook/types").Args>;
 export declare const IconOnly: Story<import("@storybook/types").Args>;
 export declare const WithLoading: Story<import("@storybook/types").Args>;
+export declare const WithIconPath: Story<import("@storybook/types").Args>;
 //# sourceMappingURL=Button.stories.d.ts.map

package/public/utilities/stories/button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAUnD,wBA+EU;AA8FV,eAAO,MAAM,KAAK,wCAAoB,CAAC;AAGvC,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAK1C,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAc1C,eAAO,MAAM,SAAS,wCAAoB,CAAC;AAc3C,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAmB1C,eAAO,MAAM,WAAW,wCAAoB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAUnD,wBA+EU;AAoGV,eAAO,MAAM,KAAK,wCAAoB,CAAC;AAGvC,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAK1C,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAc1C,eAAO,MAAM,SAAS,wCAAoB,CAAC;AAc3C,eAAO,MAAM,QAAQ,wCAAoB,CAAC;AAmB1C,eAAO,MAAM,WAAW,wCAAoB,CAAC;AAK7C,eAAO,MAAM,YAAY,wCAAoB,CAAC"}