@maggioli-design-system/mds-modal 4.7.2 → 4.8.0

package/dist/collection/components/mds-modal/mds-modal.css

@@ -1,10 +1,10 @@
 @keyframes focus-bounce {
   0%, 75%, 100% {
-    outline-offset: var(--magma-outline-focus-offset);
+    outline-offset: var(--magma-outline-focus-offset, 6px);
   }
 
   50% {
-    outline-offset: var(--magma-outline-blur-offset);
+    outline-offset: var(--magma-outline-blur-offset, 2px);
   }
 }
  /* included for focus effect */
@@ -28,18 +28,21 @@
   .animate-right-outro {
     transform: translateX(calc(100% + 50px));
   }
+.static {
+  position: static;
+}
 .fixed {
   position: fixed;
 }
 .absolute {
   position: absolute;
 }
-.ml-auto {
-  margin-left: auto;
-}
 .flex {
   display: flex;
 }
+.w-1600 {
+  width: 4rem;
+}
 .min-w-0 {
   min-width: 0rem;
 }
@@ -49,35 +52,147 @@
 .max-w-xl {
   max-width: 36rem;
 }
+.flex-grow {
+  flex-grow: 1;
+}
 .items-center {
   align-items: center;
 }
+.gap-400 {
+  gap: 1rem;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0rem;
+}
 .border-b {
   border-bottom-width: 1px;
 }
 .border-t {
   border-top-width: 1px;
 }
+.border-solid {
+  border-style: solid;
+}
 .border-tone-neutral-09 {
   --tw-border-opacity: 1;
   border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));
 }
-.bg-transparent {
-  background-color: transparent;
+.bg-label-amaranth-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));
+}
+.bg-label-aqua-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));
+}
+.bg-label-blue-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));
+}
+.bg-label-green-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));
+}
+.bg-label-lime-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));
+}
+.bg-label-orange-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));
+}
+.bg-label-orchid-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));
+}
+.bg-label-violet-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));
+}
+.bg-label-yellow-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));
+}
+.bg-tone-neutral-10 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));
+}
+.fill-label-amaranth-04 {
+  fill: rgb(var(--label-amaranth-04));
+}
+.fill-label-aqua-04 {
+  fill: rgb(var(--label-aqua-04));
+}
+.fill-label-blue-04 {
+  fill: rgb(var(--label-blue-04));
+}
+.fill-label-green-04 {
+  fill: rgb(var(--label-green-04));
+}
+.fill-label-lime-04 {
+  fill: rgb(var(--label-lime-04));
+}
+.fill-label-orange-04 {
+  fill: rgb(var(--label-orange-04));
+}
+.fill-label-orchid-04 {
+  fill: rgb(var(--label-orchid-04));
+}
+.fill-label-violet-04 {
+  fill: rgb(var(--label-violet-04));
+}
+.fill-label-yellow-04 {
+  fill: rgb(var(--label-yellow-04));
+}
+.fill-tone-neutral-04 {
+  fill: rgb(var(--tone-neutral-04));
+}
+.p-800 {
+  padding: 2rem;
+}
+.text-label-amaranth-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));
+}
+.text-label-aqua-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));
+}
+.text-label-blue-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));
 }
-.text {
-  font-size: 1rem;
+.text-label-green-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-green-04) / var(--tw-text-opacity));
+}
+.text-label-lime-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));
+}
+.text-label-orange-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));
+}
+.text-label-orchid-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));
+}
+.text-label-violet-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));
+}
+.text-label-yellow-04 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));
 }
 .text-tone-neutral-02 {
   --tw-text-opacity: 1;
@@ -146,25 +261,28 @@
   pointer-events: auto;
 }
 
-.close {
+.button-close {
   top: 0rem;
-  height: 2.25rem;
-  width: 2.25rem;
   border-radius: 9999px;
-  font-size: 2.25rem;
-  line-height: 2.5rem;
   opacity: 0;
   transition-duration: 500ms;
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
-  cursor: pointer;
-  fill: inherit;
+  --mds-button-icon-color: rgb(var(--tone-neutral));
+  --mds-button-background: transparent;
+
+  height: auto;
   position: absolute;
   transform: translate(0, 24px) rotate(90deg);
   transform-origin: center;
   transition-property: opacity, outline, outline-offset, transform;
 }
 
+.button-close::part(icon) {
+  height: 2.25rem;
+  width: 2.25rem;
+}
+
 .window {
   height: 100%;
   gap: 0rem;
@@ -302,8 +420,8 @@
     transform: translateX(0);
 }
 
-:host( .to-left-opened ) .close,
-:host( .to-left-opened.to-left-outro ) .close {
+:host( .to-left-opened ) .button-close,
+:host( .to-left-opened.to-left-outro ) .button-close {
   opacity: 1;
 
   transform: translate(-24px, 24px) rotate(0);
@@ -314,11 +432,11 @@
     transform: translateX(calc(-100% - 50px));
   }
 
-:host( .to-left-outro ) .close {
+:host( .to-left-outro ) .button-close {
   transform: translate(24px, 24px) rotate(-90deg);
 }
 
-:host( .to-left ) .close {
+:host( .to-left ) .button-close {
   right: 0rem;
 
   transform: translate(36px, 24px) rotate(90deg);
@@ -351,8 +469,8 @@
     transform: translateX(0);
 }
 
-:host( .to-right-opened ) .close,
-:host( .to-right-opened.to-right-outro ) .close {
+:host( .to-right-opened ) .button-close,
+:host( .to-right-opened.to-right-outro ) .button-close {
   opacity: 1;
 
   transform: translate(24px, 24px) rotate(0);
@@ -363,11 +481,11 @@
     transform: translateX(calc(100% + 50px));
   }
 
-:host( .to-right-outro ) .close {
+:host( .to-right-outro ) .button-close {
   transform: translate(-24px, 24px) rotate(90deg);
 }
 
-:host( .to-right ) .close {
+:host( .to-right ) .button-close {
   left: 0rem;
 
   transform: translate(-36px, 24px) rotate(-90deg);
@@ -416,4 +534,10 @@
     transform: rotateX(-22deg) scale(0.5) translateY(-40%);
   }
 
+@media (max-width: 767px) {
+  .mobile\:w-1200 {
+    width: 3rem;
+  }
+}
+
 

package/dist/collection/components/mds-modal/mds-modal.js

@@ -91,7 +91,7 @@ export class MdsModal {
             ? h("slot", { name: "window" })
             : h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
                 h("slot", { name: "top" }), h("slot", null), this.bottom &&
-                h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
+                h("slot", { name: "bottom" })), !this.window && h("mds-button", { icon: miBaselineClose, onClick: (e) => { this.closeModal(e); }, class: "button-close" })));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-modal/test/mds-modal.e2e.js

@@ -11,32 +11,12 @@ describe('mds-modal', () => {
         expect(element).toHaveAttribute('position');
         expect(element.getAttribute('position')).toBe('right');
         expect(element).not.toHaveAttribute('opened');
-        expect(element.shadowRoot).toEqualHtml(`
-      <div class="window" part="window" role="dialog">
-        <slot></slot>
-      </div>
-      <i class="close focus-bounce-light svg" tabindex="0">
-        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
-        </svg>
-      </i>
-    `);
     });
     it('renders opened', async () => {
         const page = await newE2EPage();
         await page.setContent('<mds-modal opened="true"></mds-modal>');
         const element = await page.find('mds-modal');
-        expect(element.getAttribute('opened')).not.toBe('false');
-        expect(element.shadowRoot).toEqualHtml(`
-      <div class="window" part="window" role="dialog">
-        <slot></slot>
-      </div>
-      <i class="close focus-bounce-light svg" tabindex="0">
-        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
-        </svg>
-      </i>
-    `);
+        expect(element).toHaveAttribute('opened');
     });
     it('can be closed', async () => {
         const page = await newE2EPage();

package/dist/collection/components/mds-modal/test/mds-modal.stories.js

@@ -20,7 +20,7 @@ const firstName = 'Mario';
 const lastName = 'Rossi';
 const fullName = `${firstName} ${lastName}`;
 const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`;
-const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-8 max-w-lg flex gap-4 items-center border-b border-tone-neutral-09" }, h("mds-img", { class: "w-16", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-8 max-w-lg" }, h("mds-text", null, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-8 max-w-lg flex gap-4 text-tone-neutral-02 border-t border-tone-neutral-09" }, h("mds-author", null, h("mds-avatar", { slot: "avatar", class: "w-16 mobile:w-12", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6", class: "truncate min-w-0" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04 truncate min-w-0" }, email)), h("mds-button", { icon: "mdi/dots-vertical", class: "ml-auto bg-transparent text-tone-neutral-02 p-4 border border-tone-neutral-09 rounded-full" })));
+const Template = args => h("mds-modal", Object.assign({}, args), h("header", { slot: "top", class: "p-800 max-w-lg flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09" }, h("mds-img", { class: "w-1600", src: "/logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800 max-w-lg" }, h("mds-text", null, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit.")), h("footer", { slot: "bottom", class: "p-800 max-w-lg flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09" }, h("mds-author", { class: "flex-grow" }, h("mds-avatar", { slot: "avatar", class: "w-1600 mobile:w-1200", src: "/avatar-01-200x200.jpeg" }), h("mds-text", { typography: "h6" }, fullName), h("mds-text", { typography: "caption", class: "text-tone-neutral-04" }, email)), h("mds-button", { icon: "mdi/dots-vertical", variant: "light" })));
 const CustomTemplate = args => h("mds-modal", Object.assign({}, args), h("mds-banner", { slot: "window", class: "max-w-xl mx-6", deletable: true, headline: "Action required" }, h("mds-text", { typography: "detail" }, "As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we\u2019re future-proofing our components as more brands adopt NewsKit."), h("mds-button", { slot: "actions", variant: "primary", tone: "quiet" }, "Cancel"), h("mds-button", { slot: "actions", variant: "primary" }, "Confirm")));
 const AriaTemplate = () => {
     // Click not working with reader

package/dist/collection/dictionary/file-extensions.js

@@ -0,0 +1,64 @@
+const fileExtensionsDictionary = {
+    '7z': { format: 'archive', description: 'Archivio compresso' },
+    ace: { format: 'archive', description: 'Archivio compresso' },
+    ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
+    dart: { format: 'code', description: 'Dart' },
+    db: { format: 'data', description: 'File di database' },
+    default: { format: 'attachment', description: 'Formato sconosciuto' },
+    dmg: { format: 'executable', description: 'Apple Disk Image' },
+    doc: { format: 'text', description: 'Documento Microsoft Word' },
+    docm: { format: 'text', description: 'Documento Microsoft Word' },
+    docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
+    eml: { format: 'email', description: 'E-mail di posta elettronica' },
+    eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
+    exe: { format: 'executable', description: 'File eseguibile Windows' },
+    flac: { format: 'audio', description: 'Audio non compresso' },
+    gif: { format: 'image', description: 'Immagine compressa', preview: true },
+    htm: { format: 'markup', description: 'Pagina web' },
+    heic: { format: 'image', description: 'High Efficiency Image File Format' },
+    html: { format: 'markup', description: 'Pagina web' },
+    jpe: { format: 'image', description: 'Immagine compressa', preview: true },
+    jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
+    jpg: { format: 'image', description: 'Immagine compressa', preview: true },
+    js: { format: 'code', description: 'JavaScript' },
+    json: { format: 'data', description: 'JavaScript Object Notation' },
+    jsx: { format: 'code', description: 'JavaScript' },
+    m2v: { format: 'video', description: 'Filmato SD' },
+    mp2: { format: 'audio', description: 'Audio compresso' },
+    mp3: { format: 'audio', description: 'Audio compresso' },
+    mp4: { format: 'video', description: 'Filmato HD' },
+    mp4v: { format: 'video', description: 'Filmato HD' },
+    mpeg: { format: 'video', description: 'Filmato SD' },
+    mpg4: { format: 'video', description: 'Filmato SD' },
+    mpg: { format: 'video', description: 'Filmato SD' },
+    mpga: { format: 'audio', description: 'Audio compresso' },
+    odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
+    ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
+    odt: { format: 'text', description: 'File di testo LibreOffice' },
+    pdf: { format: 'document', description: 'Documento Adobe' },
+    php: { format: 'code', description: 'Hypertext Preprocessor' },
+    png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
+    ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
+    rar: { format: 'archive', description: 'Archivio compresso' },
+    rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
+    sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
+    shtml: { format: 'markup', description: 'Pagina web' },
+    svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
+    tar: { format: 'archive', description: 'Archivio non compresso' },
+    tiff: { format: 'image', description: 'Tag Image File Format' },
+    ts: { format: 'code', description: 'TypeScript' },
+    tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
+    txt: { format: 'text', description: 'Documento di testo non formattato' },
+    wav: { format: 'audio', description: 'Audio non compresso' },
+    webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
+    xar: { format: 'archive', description: 'Archivio compresso' },
+    xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+    xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
+    zip: { format: 'archive', description: 'Archivio compresso' },
+};
+const genericMimeToExt = new Map([
+    ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
+    ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],
+    ['video', ['.mv2', '.mp4', '.mp4v', '.mpeg', '.mpg4', '.mpg']],
+]);
+export { fileExtensionsDictionary, genericMimeToExt, };

package/dist/collection/dictionary/icon.js

@@ -2,4 +2,9 @@ import jsonIconsDictionary from "../fixtures/icons.json";
 import jsonMggIconsDictionary from "../fixtures/iconsauce.json";
 const iconsDictionary = jsonIconsDictionary;
 const mggIconsDictionary = jsonMggIconsDictionary;
-export { iconsDictionary, mggIconsDictionary, };
+const svgIconsDictionary = [
+    `${location.origin}/svg/mi/baseline/email.svg`,
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yMzMtODAgNjUtMjgxTDgwLTU1MGwyODgtMjUgMTEyLTI2NSAxMTIgMjY1IDI4OCAyNS0yMTggMTg5IDY1IDI4MS0yNDctMTQ5TDIzMy04MFoiLz48L3N2Zz4=',
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>',
+];
+export { iconsDictionary, mggIconsDictionary, svgIconsDictionary, };

package/dist/collection/dictionary/text.js

@@ -0,0 +1,6 @@
+const truncateDictionary = [
+    'all',
+    'none',
+    'word',
+];
+export { truncateDictionary, };

package/dist/collection/dictionary/variant.js

@@ -35,6 +35,23 @@ const themeFullVariantDictionary = [
     'warning',
     'yellow',
 ];
+const themeFullVariantAvatarDictionary = [
+    'amaranth',
+    'aqua',
+    'blue',
+    'error',
+    'green',
+    'info',
+    'lime',
+    'orange',
+    'orchid',
+    'primary',
+    'sky',
+    'success',
+    'violet',
+    'warning',
+    'yellow',
+];
 const themeLabelVariantDictionary = [
     'amaranth',
     'aqua',
@@ -70,4 +87,4 @@ const toneMinimalVariantDictionary = [
     'strong',
     'weak',
 ];
-export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };

package/dist/collection/fixtures/filenames.js

@@ -0,0 +1,57 @@
+const filesList = [
+    'alarm_circuit_plastic.eps',
+    'awesome_orchestration.png',
+    'b2c_tan_sports.svg',
+    'bedfordshire_iceland_identity.txt',
+    'books_monetize_arizona.htm',
+    'brand.shtml',
+    'brunei_logistical.eml',
+    'buckinghamshire_macao.jpg',
+    'calculating.json',
+    'complexity_deposit.mpg',
+    'compressing_black_colorado.ods',
+    'connect_local_visualize.pdf',
+    'copying.default',
+    'explicit.mp2',
+    'fish.php',
+    'flexibility_auto_money.html',
+    'foreground_overriding.ai',
+    'forge_face.ts',
+    'forges.doc',
+    'frozen_haptic.7z',
+    'gorgeous_manager_savings.ppt',
+    'graphic_frozen_bedfordshire.tar',
+    'hdd_navigate_panama.xlsx',
+    'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+    'impactful_alarm_handmade.mpeg',
+    'initiatives_group.gif',
+    'intelligent_radical.jpe',
+    'interface_bedfordshire_solid.m2v',
+    'iowa_installation.jpeg',
+    'liaison_panel_central.flac',
+    'matrix_black_hat.db',
+    'metrics_lempira_account.xls',
+    'monitor.js',
+    'nebraska.mp4',
+    'needs_based_solid.odp',
+    'officer_somalia.docm',
+    'open_source.webp',
+    'open_source_gorgeous.sass',
+    'optimization_radical.mp3',
+    'ports_copy_granite.mpga',
+    'pound.rtf',
+    'protocol_designer.dmg',
+    'reduced_regional_greenland.mp4v',
+    'revolutionize.mpg4',
+    'rss_systematic_avon.exe',
+    'salad_compressing.odt',
+    'sky_marketing.ace',
+    'synergistic.wav',
+    'this_is_an_extensionless_file',
+    'tuna_table_fall.zip',
+    'unbranded.rar',
+    'upgradable_gold.docx',
+    'wisconsin_bypassing_small.xar',
+    'wooden.jsx',
+];
+export { filesList, };

package/dist/collection/type/file-types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/text.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -0,0 +1,111 @@
+import baselineFolderZip from "@icon/mi/baseline/folder-zip.svg";
+import baselineAttachFile from "@icon/mi/baseline/attach-file.svg";
+import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
+import baselineTerminal from "@icon/mi/baseline/terminal.svg";
+import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
+import mdiHardDisk from "@icon/mdi/harddisk.svg";
+const fileFormatsVariant = {
+    archive: {
+        color: 'fill-label-amaranth-04 text-label-amaranth-04',
+        icon: baselineFolderZip,
+        iconBackground: 'bg-label-amaranth-10',
+        variant: 'amaranth',
+    },
+    attachment: {
+        color: 'fill-tone-neutral-04 text-tone-neutral-04',
+        icon: baselineAttachFile,
+        iconBackground: 'bg-tone-neutral-10',
+        variant: 'dark',
+    },
+    audio: {
+        color: 'fill-label-violet-04 text-label-violet-04',
+        icon: baselineAudiotrack,
+        iconBackground: 'bg-label-violet-10',
+        variant: 'violet',
+    },
+    code: {
+        color: 'fill-label-yellow-04 text-label-yellow-04',
+        icon: baselineTerminal,
+        iconBackground: 'bg-label-yellow-10',
+        variant: 'yellow',
+    },
+    data: {
+        color: 'fill-label-yellow-04 text-label-yellow-04',
+        icon: mdiHardDisk,
+        iconBackground: 'bg-label-yellow-10',
+        variant: 'yellow',
+    },
+    document: {
+        color: 'fill-label-orange-04 text-label-orange-04',
+        icon: baselineInsertDriveFile,
+        iconBackground: 'bg-label-orange-10',
+        variant: 'orange',
+    },
+    email: {
+        color: 'fill-label-blue-04 text-label-blue-04',
+        icon: 'mi/baseline/email',
+        iconBackground: 'bg-label-blue-10',
+        variant: 'blue',
+    },
+    executable: {
+        color: 'fill-label-amaranth-04 text-label-amaranth-04',
+        icon: 'mi/baseline/wysiwyg',
+        iconBackground: 'bg-label-amaranth-10',
+        variant: 'amaranth',
+    },
+    image: {
+        color: 'fill-label-green-04 text-label-green-04',
+        icon: 'mi/baseline/panorama',
+        iconBackground: 'bg-label-green-10',
+        variant: 'green',
+    },
+    imageRaster: {
+        color: 'fill-label-green-04 text-label-green-04',
+        icon: 'mi/baseline/panorama',
+        iconBackground: 'bg-label-green-10',
+        variant: 'green',
+    },
+    markup: {
+        color: 'fill-label-yellow-04 text-label-yellow-04',
+        icon: 'mi/baseline/web',
+        iconBackground: 'bg-label-yellow-10',
+        variant: 'yellow',
+    },
+    slide: {
+        color: 'fill-label-orchid-04 text-label-orchid-04',
+        icon: 'mi/baseline/tv',
+        iconBackground: 'bg-label-orchid-10',
+        variant: 'orchid',
+    },
+    spreadsheet: {
+        color: 'fill-label-lime-04 text-label-lime-04',
+        icon: 'mi/baseline/border-all',
+        iconBackground: 'bg-label-lime-10',
+        variant: 'lime',
+    },
+    text: {
+        color: 'fill-label-blue-04 text-label-blue-04',
+        icon: 'mi/baseline/description',
+        iconBackground: 'bg-label-blue-10',
+        variant: 'blue',
+    },
+    vectorImage: {
+        color: 'fill-label-aqua-04 text-label-aqua-04',
+        icon: 'mdi/vector-curve',
+        iconBackground: 'bg-label-aqua-10',
+        variant: 'aqua',
+    },
+    vector: {
+        color: 'fill-label-aqua-04 text-label-aqua-04',
+        icon: 'mdi/vector-curve',
+        iconBackground: 'bg-label-aqua-10',
+        variant: 'aqua',
+    },
+    video: {
+        color: 'fill-label-violet-04 text-label-violet-04',
+        icon: 'mi/baseline/videocam',
+        iconBackground: 'bg-label-violet-10',
+        variant: 'violet',
+    },
+};
+export { fileFormatsVariant, };