@everchron/ec-shards 7.2.7 → 7.3.0

package/dist/img/card-report.aaf359b0.svg

@@ -0,0 +1,19 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 3H6C4.89543 3 4 3.89543 4 5V27C4 28.1046 4.89543 29 6 29H24C25.1046 29 26 28.1046 26 27V5C26 3.89543 25.1046 3 24 3Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M24 2H6C4.89543 2 4 2.89543 4 4V26C4 27.1046 4.89543 28 6 28H24C25.1046 28 26 27.1046 26 26V4C26 2.89543 25.1046 2 24 2Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M24 3H6C5.44772 3 5 3.44772 5 4V26C5 26.5523 5.44772 27 6 27H24C24.5523 27 25 26.5523 25 26V4C25 3.44772 24.5523 3 24 3Z" fill="white"/>
+<rect x="7.5" y="17.5" width="15" height="7" rx="0.5" fill="white" stroke="#DFE0E7"/>
+<rect x="7.5" y="5.5" width="15" height="10" rx="0.5" fill="white" stroke="#DFE0E7"/>
+<rect x="17" y="6" width="1" height="9" fill="#DFE0E7" fill-opacity="0.5"/>
+<rect x="17" y="18" width="1" height="6" fill="#DFE0E7" fill-opacity="0.5"/>
+<rect x="9" y="19" width="6" height="1" rx="0.5" fill="#7A7F9A"/>
+<rect x="9" y="21" width="4" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="7" width="6" height="1" rx="0.5" fill="#7A7F9A"/>
+<rect x="9" y="9" width="6" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="11" width="5" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="9" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="11" width="1" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="21" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="13" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="13" width="6" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+</svg>

package/dist/img/excerpt-report.10f43f94.svg

@@ -0,0 +1,30 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 3H6C4.89543 3 4 3.89543 4 5V27C4 28.1046 4.89543 29 6 29H24C25.1046 29 26 28.1046 26 27V5C26 3.89543 25.1046 3 24 3Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M24 2H6C4.89543 2 4 2.89543 4 4V26C4 27.1046 4.89543 28 6 28H24C25.1046 28 26 27.1046 26 26V4C26 2.89543 25.1046 2 24 2Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M24 3H6C5.44772 3 5 3.44772 5 4V26C5 26.5523 5.44772 27 6 27H24C24.5523 27 25 26.5523 25 26V4C25 3.44772 24.5523 3 24 3Z" fill="white"/>
+<rect opacity="0.2" x="6" y="6.5" width="9" height="4" rx="1" fill="#0B71EB"/>
+<rect opacity="0.15" x="6" y="19.5" width="9" height="4" rx="1" fill="#0EBA65"/>
+<path d="M25 15H5V16H25V15Z" fill="#DFE0E7"/>
+<path d="M17.5 3H16.5V27H17.5V3Z" fill="#DFE0E7"/>
+<path d="M13.5 18H10.5C10.2239 18 10 18.2239 10 18.5C10 18.7761 10.2239 19 10.5 19H13.5C13.7761 19 14 18.7761 14 18.5C14 18.2239 13.7761 18 13.5 18Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M8.5 18H7.5C7.22386 18 7 18.2239 7 18.5C7 18.7761 7.22386 19 7.5 19H8.5C8.77614 19 9 18.7761 9 18.5C9 18.2239 8.77614 18 8.5 18Z" fill="#9599AF" fill-opacity="0.3"/>
+<path opacity="0.3" d="M8.5 20H7.5C7.22386 20 7 20.2239 7 20.5C7 20.7761 7.22386 21 7.5 21H8.5C8.77614 21 9 20.7761 9 20.5C9 20.2239 8.77614 20 8.5 20Z" fill="#0EBA65"/>
+<path opacity="0.3" d="M8.5 22H7.5C7.22386 22 7 22.2239 7 22.5C7 22.7761 7.22386 23 7.5 23H8.5C8.77614 23 9 22.7761 9 22.5C9 22.2239 8.77614 22 8.5 22Z" fill="#0EBA65"/>
+<path opacity="0.6" d="M12.5 20H10.5C10.2239 20 10 20.2239 10 20.5C10 20.7761 10.2239 21 10.5 21H12.5C12.7761 21 13 20.7761 13 20.5C13 20.2239 12.7761 20 12.5 20Z" fill="#08AF5C"/>
+<path opacity="0.6" d="M12.5 22H10.5C10.2239 22 10 22.2239 10 22.5C10 22.7761 10.2239 23 10.5 23H12.5C12.7761 23 13 22.7761 13 22.5C13 22.2239 12.7761 22 12.5 22Z" fill="#08AF5C"/>
+<path d="M8.5 24H7.5C7.22386 24 7 24.2239 7 24.5C7 24.7761 7.22386 25 7.5 25H8.5C8.77614 25 9 24.7761 9 24.5C9 24.2239 8.77614 24 8.5 24Z" fill="#9599AF" fill-opacity="0.3"/>
+<path d="M12.5 24H10.5C10.2239 24 10 24.2239 10 24.5C10 24.7761 10.2239 25 10.5 25H12.5C12.7761 25 13 24.7761 13 24.5C13 24.2239 12.7761 24 12.5 24Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M13.5 5H10.5C10.2239 5 10 5.22386 10 5.5C10 5.77614 10.2239 6 10.5 6H13.5C13.7761 6 14 5.77614 14 5.5C14 5.22386 13.7761 5 13.5 5Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M22.5 5H19.5C19.2239 5 19 5.22386 19 5.5C19 5.77614 19.2239 6 19.5 6H22.5C22.7761 6 23 5.77614 23 5.5C23 5.22386 22.7761 5 22.5 5Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M21.5 7H19.5C19.2239 7 19 7.22386 19 7.5C19 7.77614 19.2239 8 19.5 8H21.5C21.7761 8 22 7.77614 22 7.5C22 7.22386 21.7761 7 21.5 7Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M22.5 18H19.5C19.2239 18 19 18.2239 19 18.5C19 18.7761 19.2239 19 19.5 19H22.5C22.7761 19 23 18.7761 23 18.5C23 18.2239 22.7761 18 22.5 18Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M22.5 20H19.5C19.2239 20 19 20.2239 19 20.5C19 20.7761 19.2239 21 19.5 21H22.5C22.7761 21 23 20.7761 23 20.5C23 20.2239 22.7761 20 22.5 20Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M20.5 22H19.5C19.2239 22 19 22.2239 19 22.5C19 22.7761 19.2239 23 19.5 23H20.5C20.7761 23 21 22.7761 21 22.5C21 22.2239 20.7761 22 20.5 22Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M8.5 5H7.5C7.22386 5 7 5.22386 7 5.5C7 5.77614 7.22386 6 7.5 6H8.5C8.77614 6 9 5.77614 9 5.5C9 5.22386 8.77614 5 8.5 5Z" fill="#9599AF" fill-opacity="0.3"/>
+<path opacity="0.3" d="M8.5 7H7.5C7.22386 7 7 7.22386 7 7.5C7 7.77614 7.22386 8 7.5 8H8.5C8.77614 8 9 7.77614 9 7.5C9 7.22386 8.77614 7 8.5 7Z" fill="#0B71EB"/>
+<path opacity="0.3" d="M8.5 9H7.5C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5C9 9.22386 8.77614 9 8.5 9Z" fill="#0B71EB"/>
+<path opacity="0.6" d="M12.5 7H10.5C10.2239 7 10 7.22386 10 7.5C10 7.77614 10.2239 8 10.5 8H12.5C12.7761 8 13 7.77614 13 7.5C13 7.22386 12.7761 7 12.5 7Z" fill="#0B71EB"/>
+<path opacity="0.6" d="M12.5 9H10.5C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10H12.5C12.7761 10 13 9.77614 13 9.5C13 9.22386 12.7761 9 12.5 9Z" fill="#0B71EB"/>
+<path d="M8.5 11H7.5C7.22386 11 7 11.2239 7 11.5C7 11.7761 7.22386 12 7.5 12H8.5C8.77614 12 9 11.7761 9 11.5C9 11.2239 8.77614 11 8.5 11Z" fill="#9599AF" fill-opacity="0.3"/>
+<path d="M12.5 11H10.5C10.2239 11 10 11.2239 10 11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11Z" fill="#9599AF" fill-opacity="0.5"/>
+</svg>

package/dist/img/pdf-table.ffd847b7.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 5H4C2.89543 5 2 5.89543 2 7V25C2 26.1046 2.89543 27 4 27H26C27.1046 27 28 26.1046 28 25V7C28 5.89543 27.1046 5 26 5Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M26 4H4C2.89543 4 2 4.89543 2 6V24C2 25.1046 2.89543 26 4 26H26C27.1046 26 28 25.1046 28 24V6C28 4.89543 27.1046 4 26 4Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M26 5H4C3.44772 5 3 5.44772 3 6V24C3 24.5523 3.44772 25 4 25H26C26.5523 25 27 24.5523 27 24V6C27 5.44772 26.5523 5 26 5Z" fill="white"/>
+<path d="M5.12725 14.6987C6.49536 16.884 9.34983 6.44673 7.18917 7.02306C4.94237 7.62127 12.0718 14.8808 12.9495 12.8346C13.7932 10.8675 3.76604 12.524 5.12725 14.6987Z" stroke="#FF213E" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.5 8H12.5C12.2239 8 12 8.22386 12 8.5C12 8.77614 12.2239 9 12.5 9H23.5C23.7761 9 24 8.77614 24 8.5C24 8.22386 23.7761 8 23.5 8Z" fill="#FF213E"/>
+<path opacity="0.8" d="M24.5 16.5H5.5V22.5H24.5V16.5Z" stroke="#CACCD7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17V19H18V17H19V19H24V20H19V22H18V20H12V22H11V20H6V19H11V17H12Z" fill="#CACCD7" fill-opacity="0.8"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.2.7",
+  "version": "7.3.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",
@@ -25,6 +25,8 @@
     "*.svg"
   ],
   "dependencies": {
+    "emoji.json": "^14.0.0",
+    "js-search-array": "^1.0.1",
     "v-click-outside": "^2.1.3"
   },
   "peerDependencies": {

package/src/assets/icons/basketball.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.75C20.3848 24.75 24.75 20.3848 24.75 15C24.75 9.61522 20.3848 5.25 15 5.25C9.61522 5.25 5.25 9.61522 5.25 15C5.25 20.3848 9.61522 24.75 15 24.75Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.025 5.30469C16.1797 6.75039 16.0087 8.21237 15.5246 9.58336C15.0405 10.9544 14.2557 12.1996 13.2276 13.2277C12.1995 14.2558 10.9542 15.0407 9.58324 15.5247C8.21225 16.0088 6.75026 16.1798 5.30457 16.0251" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.6953 13.9749C23.2496 13.8203 21.7876 13.9913 20.4166 14.4754C19.0457 14.9595 17.8004 15.7443 16.7723 16.7724C15.7442 17.8005 14.9594 19.0458 14.4753 20.4168C13.9912 21.7878 13.8202 23.2497 13.9749 24.6954" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.84515 9.66394C10.2941 10.0047 13.544 11.4388 16.1205 13.7568C18.697 16.0748 20.4653 19.1555 21.1675 22.5494" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/emoji.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58331 12.8333C10.0112 12.3079 10.5962 12.01 11.2083 12.01C11.8204 12.01 12.3891 12.3079 12.8333 12.8333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1667 12.8333C17.5946 12.3079 18.1796 12.01 18.7917 12.01C19.4038 12.01 19.9725 12.3079 20.4167 12.8333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8943 8.10571C25.7019 11.9133 25.7019 18.0867 21.8943 21.8943C18.0867 25.7019 11.9134 25.7019 8.10577 21.8943C4.29816 18.0867 4.29816 11.9133 8.10577 8.10571C11.9134 4.2981 18.0867 4.2981 21.8943 8.10571Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.7916 17.912C18.7916 17.912 17.3692 19.3333 15 19.3333C12.6296 19.3333 11.2083 17.912 11.2083 17.912" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/flag.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8333 16.0834L13.4226 17.8514C13.7173 18.7365 14.5461 19.3334 15.4788 19.3334H22.5833C23.7804 19.3334 24.75 18.3638 24.75 17.1667V10.8346C24.75 9.63755 23.7804 8.66797 22.5833 8.66797H17.2403" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.75 24.75L6.20006 8.10133C5.73314 6.69842 6.77747 5.25 8.25622 5.25H15.0736C16.2707 5.25 17.2403 6.21958 17.2403 7.41667V13.9167C17.2403 15.1138 16.2707 16.0833 15.0736 16.0833H8.86072" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/food-drink.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1667 17.25V16.1666C17.1667 14.3715 15.7117 12.9166 13.9167 12.9166H8.5C6.70492 12.9166 5.25 14.3715 5.25 16.1666V17.25" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 23.75H7.41667C6.21958 23.75 5.25 22.7804 5.25 21.5833V20.5H17.1667V21.5833C17.1667 22.7804 16.1971 23.75 15 23.75Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16666 17.25H18.25" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5743 12.9166L13.1616 9.80959C13.076 9.15959 13.5808 8.58325 14.2362 8.58325H23.6667C24.3264 8.58325 24.8323 9.16717 24.7392 9.81933L22.8823 22.8193C22.8054 23.3534 22.3482 23.7499 21.8098 23.7499H19.4991" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7491 4.25H20.434C19.8967 4.25 19.4417 4.64325 19.3626 5.17408L18.8556 8.58333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/hand.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.399 14.665V5.59975C13.399 4.71669 14.1157 4 14.9988 4C15.8818 4 16.5985 4.71669 16.5985 5.59975V14.665" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.399 7.73269C13.399 6.84962 12.6823 6.13293 11.7993 6.13293C10.9162 6.13293 10.1995 6.84962 10.1995 7.73269V14.6649" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5985 7.73269C16.5985 6.84962 17.3152 6.13293 18.1983 6.13293C19.0813 6.13293 19.798 6.84962 19.798 7.73269V13.5984V16.7979L21.8254 14.7705C22.4728 14.1232 23.5222 14.1232 24.1696 14.7705C24.7284 15.3294 24.8148 16.205 24.3765 16.8619L20.631 22.4803C19.4439 24.2602 17.4464 25.33 15.307 25.33H13.399C9.86462 25.33 7 22.4653 7 18.9309V13.5984V9.86569C7 8.98262 7.71669 8.26594 8.59975 8.26594C9.48281 8.26594 10.1995 8.98262 10.1995 9.86569" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/leaf.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3889 22.8889C20.774 22.8889 22.3412 14.9427 26 12.8314C24.6679 11.0062 22.9195 9.52502 20.9001 8.51097C18.8807 7.49693 16.6485 6.97924 14.3889 7.0009" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3889 22.8889C12.2819 22.8889 10.2612 22.0519 8.77133 20.562C7.28146 19.0721 6.44446 17.0514 6.44446 14.9444C6.44446 12.8374 7.28146 10.8167 8.77133 9.32687C10.2612 7.837 12.2819 7 14.3889 7" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9766 14.3735C12.7367 14.7482 10.6012 15.5916 8.70972 16.8483C6.81822 18.1051 5.21332 19.747 4 21.6667" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/plane.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.8833 9.15001L20.3083 12.725L22.2583 22.3667C22.3667 22.6917 22.2583 23.125 21.9333 23.3417L21.175 24.1C20.6333 24.6417 19.6583 24.425 19.4417 23.775L16.625 16.5167L12.9417 20.2L13.1583 22.5833C13.1583 22.9083 13.05 23.2333 12.8333 23.45L11.6417 24.6417L9.36668 20.85L5.57501 18.575L6.65835 17.1667C6.87501 16.95 7.20001 16.8417 7.52501 16.8417L9.90835 17.0583L13.5917 13.375L6.22501 10.5583C5.57501 10.2333 5.35835 9.36667 5.90001 8.82501L6.65835 8.06667C6.87501 7.85001 7.30835 7.74167 7.63335 7.74167L17.275 9.69167L20.85 6.11667C21.7167 5.25001 23.0167 5.25001 23.8833 6.11667C24.75 6.98334 24.75 8.28334 23.8833 9.15001Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/sparkle.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.49996 6.25C9.49996 7.39927 9.04341 8.50147 8.23076 9.31413C7.4181 10.1268 6.3159 10.5833 5.16663 10.5833C6.3159 10.5833 7.4181 11.0399 8.23076 11.8525C9.04341 12.6652 9.49996 13.7674 9.49996 14.9167C9.49996 13.7674 9.95651 12.6652 10.7692 11.8525C11.5818 11.0399 12.684 10.5833 13.8333 10.5833C12.684 10.5833 11.5818 10.1268 10.7692 9.31413C9.95651 8.50147 9.49996 7.39927 9.49996 6.25Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.4167 19.25C21.4167 17.8134 20.846 16.4356 19.8302 15.4198C18.8143 14.404 17.4366 13.8333 16 13.8333C17.4366 13.8333 18.8143 13.2626 19.8302 12.2468C20.846 11.231 21.4167 9.85322 21.4167 8.41663C21.4167 9.85322 21.9873 11.231 23.0032 12.2468C24.019 13.2626 25.3967 13.8333 26.8333 13.8333C25.3967 13.8333 24.019 14.404 23.0032 15.4198C21.9873 16.4356 21.4167 17.8134 21.4167 19.25Z" stroke="currentColor" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke-linejoin="round"/>
+<path d="M13.8333 17.625C13.8333 18.7743 13.3768 19.8765 12.5641 20.6891C11.7515 21.5018 10.6493 21.9583 9.5 21.9583C10.6493 21.9583 11.7515 22.4149 12.5641 23.2275C13.3768 24.0402 13.8333 25.1424 13.8333 26.2917C13.8333 25.1424 14.2899 24.0402 15.1025 23.2275C15.9152 22.4149 17.0174 21.9583 18.1667 21.9583C17.0174 21.9583 15.9152 21.5018 15.1025 20.6891C14.2899 19.8765 13.8333 18.7743 13.8333 17.625Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/file-icons/card-report.svg

@@ -0,0 +1,19 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 3H6C4.89543 3 4 3.89543 4 5V27C4 28.1046 4.89543 29 6 29H24C25.1046 29 26 28.1046 26 27V5C26 3.89543 25.1046 3 24 3Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M24 2H6C4.89543 2 4 2.89543 4 4V26C4 27.1046 4.89543 28 6 28H24C25.1046 28 26 27.1046 26 26V4C26 2.89543 25.1046 2 24 2Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M24 3H6C5.44772 3 5 3.44772 5 4V26C5 26.5523 5.44772 27 6 27H24C24.5523 27 25 26.5523 25 26V4C25 3.44772 24.5523 3 24 3Z" fill="white"/>
+<rect x="7.5" y="17.5" width="15" height="7" rx="0.5" fill="white" stroke="#DFE0E7"/>
+<rect x="7.5" y="5.5" width="15" height="10" rx="0.5" fill="white" stroke="#DFE0E7"/>
+<rect x="17" y="6" width="1" height="9" fill="#DFE0E7" fill-opacity="0.5"/>
+<rect x="17" y="18" width="1" height="6" fill="#DFE0E7" fill-opacity="0.5"/>
+<rect x="9" y="19" width="6" height="1" rx="0.5" fill="#7A7F9A"/>
+<rect x="9" y="21" width="4" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="7" width="6" height="1" rx="0.5" fill="#7A7F9A"/>
+<rect x="9" y="9" width="6" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="11" width="5" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="9" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="11" width="1" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="21" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="19" y="13" width="2" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+<rect x="9" y="13" width="6" height="1" rx="0.5" fill="#9599AF" fill-opacity="0.6"/>
+</svg>

package/src/assets/images/file-icons/excerpt-report.svg

@@ -0,0 +1,30 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 3H6C4.89543 3 4 3.89543 4 5V27C4 28.1046 4.89543 29 6 29H24C25.1046 29 26 28.1046 26 27V5C26 3.89543 25.1046 3 24 3Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M24 2H6C4.89543 2 4 2.89543 4 4V26C4 27.1046 4.89543 28 6 28H24C25.1046 28 26 27.1046 26 26V4C26 2.89543 25.1046 2 24 2Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M24 3H6C5.44772 3 5 3.44772 5 4V26C5 26.5523 5.44772 27 6 27H24C24.5523 27 25 26.5523 25 26V4C25 3.44772 24.5523 3 24 3Z" fill="white"/>
+<rect opacity="0.2" x="6" y="6.5" width="9" height="4" rx="1" fill="#0B71EB"/>
+<rect opacity="0.15" x="6" y="19.5" width="9" height="4" rx="1" fill="#0EBA65"/>
+<path d="M25 15H5V16H25V15Z" fill="#DFE0E7"/>
+<path d="M17.5 3H16.5V27H17.5V3Z" fill="#DFE0E7"/>
+<path d="M13.5 18H10.5C10.2239 18 10 18.2239 10 18.5C10 18.7761 10.2239 19 10.5 19H13.5C13.7761 19 14 18.7761 14 18.5C14 18.2239 13.7761 18 13.5 18Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M8.5 18H7.5C7.22386 18 7 18.2239 7 18.5C7 18.7761 7.22386 19 7.5 19H8.5C8.77614 19 9 18.7761 9 18.5C9 18.2239 8.77614 18 8.5 18Z" fill="#9599AF" fill-opacity="0.3"/>
+<path opacity="0.3" d="M8.5 20H7.5C7.22386 20 7 20.2239 7 20.5C7 20.7761 7.22386 21 7.5 21H8.5C8.77614 21 9 20.7761 9 20.5C9 20.2239 8.77614 20 8.5 20Z" fill="#0EBA65"/>
+<path opacity="0.3" d="M8.5 22H7.5C7.22386 22 7 22.2239 7 22.5C7 22.7761 7.22386 23 7.5 23H8.5C8.77614 23 9 22.7761 9 22.5C9 22.2239 8.77614 22 8.5 22Z" fill="#0EBA65"/>
+<path opacity="0.6" d="M12.5 20H10.5C10.2239 20 10 20.2239 10 20.5C10 20.7761 10.2239 21 10.5 21H12.5C12.7761 21 13 20.7761 13 20.5C13 20.2239 12.7761 20 12.5 20Z" fill="#08AF5C"/>
+<path opacity="0.6" d="M12.5 22H10.5C10.2239 22 10 22.2239 10 22.5C10 22.7761 10.2239 23 10.5 23H12.5C12.7761 23 13 22.7761 13 22.5C13 22.2239 12.7761 22 12.5 22Z" fill="#08AF5C"/>
+<path d="M8.5 24H7.5C7.22386 24 7 24.2239 7 24.5C7 24.7761 7.22386 25 7.5 25H8.5C8.77614 25 9 24.7761 9 24.5C9 24.2239 8.77614 24 8.5 24Z" fill="#9599AF" fill-opacity="0.3"/>
+<path d="M12.5 24H10.5C10.2239 24 10 24.2239 10 24.5C10 24.7761 10.2239 25 10.5 25H12.5C12.7761 25 13 24.7761 13 24.5C13 24.2239 12.7761 24 12.5 24Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M13.5 5H10.5C10.2239 5 10 5.22386 10 5.5C10 5.77614 10.2239 6 10.5 6H13.5C13.7761 6 14 5.77614 14 5.5C14 5.22386 13.7761 5 13.5 5Z" fill="#9599AF" fill-opacity="0.5"/>
+<path d="M22.5 5H19.5C19.2239 5 19 5.22386 19 5.5C19 5.77614 19.2239 6 19.5 6H22.5C22.7761 6 23 5.77614 23 5.5C23 5.22386 22.7761 5 22.5 5Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M21.5 7H19.5C19.2239 7 19 7.22386 19 7.5C19 7.77614 19.2239 8 19.5 8H21.5C21.7761 8 22 7.77614 22 7.5C22 7.22386 21.7761 7 21.5 7Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M22.5 18H19.5C19.2239 18 19 18.2239 19 18.5C19 18.7761 19.2239 19 19.5 19H22.5C22.7761 19 23 18.7761 23 18.5C23 18.2239 22.7761 18 22.5 18Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M22.5 20H19.5C19.2239 20 19 20.2239 19 20.5C19 20.7761 19.2239 21 19.5 21H22.5C22.7761 21 23 20.7761 23 20.5C23 20.2239 22.7761 20 22.5 20Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M20.5 22H19.5C19.2239 22 19 22.2239 19 22.5C19 22.7761 19.2239 23 19.5 23H20.5C20.7761 23 21 22.7761 21 22.5C21 22.2239 20.7761 22 20.5 22Z" fill="#9599AF" fill-opacity="0.7"/>
+<path d="M8.5 5H7.5C7.22386 5 7 5.22386 7 5.5C7 5.77614 7.22386 6 7.5 6H8.5C8.77614 6 9 5.77614 9 5.5C9 5.22386 8.77614 5 8.5 5Z" fill="#9599AF" fill-opacity="0.3"/>
+<path opacity="0.3" d="M8.5 7H7.5C7.22386 7 7 7.22386 7 7.5C7 7.77614 7.22386 8 7.5 8H8.5C8.77614 8 9 7.77614 9 7.5C9 7.22386 8.77614 7 8.5 7Z" fill="#0B71EB"/>
+<path opacity="0.3" d="M8.5 9H7.5C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5C9 9.22386 8.77614 9 8.5 9Z" fill="#0B71EB"/>
+<path opacity="0.6" d="M12.5 7H10.5C10.2239 7 10 7.22386 10 7.5C10 7.77614 10.2239 8 10.5 8H12.5C12.7761 8 13 7.77614 13 7.5C13 7.22386 12.7761 7 12.5 7Z" fill="#0B71EB"/>
+<path opacity="0.6" d="M12.5 9H10.5C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10H12.5C12.7761 10 13 9.77614 13 9.5C13 9.22386 12.7761 9 12.5 9Z" fill="#0B71EB"/>
+<path d="M8.5 11H7.5C7.22386 11 7 11.2239 7 11.5C7 11.7761 7.22386 12 7.5 12H8.5C8.77614 12 9 11.7761 9 11.5C9 11.2239 8.77614 11 8.5 11Z" fill="#9599AF" fill-opacity="0.3"/>
+<path d="M12.5 11H10.5C10.2239 11 10 11.2239 10 11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11Z" fill="#9599AF" fill-opacity="0.5"/>
+</svg>

package/src/assets/images/file-icons/pdf-table.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 5H4C2.89543 5 2 5.89543 2 7V25C2 26.1046 2.89543 27 4 27H26C27.1046 27 28 26.1046 28 25V7C28 5.89543 27.1046 5 26 5Z" fill="#9599AF" fill-opacity="0.12"/>
+<path d="M26 4H4C2.89543 4 2 4.89543 2 6V24C2 25.1046 2.89543 26 4 26H26C27.1046 26 28 25.1046 28 24V6C28 4.89543 27.1046 4 26 4Z" fill="#9599AF" fill-opacity="0.25"/>
+<path d="M26 5H4C3.44772 5 3 5.44772 3 6V24C3 24.5523 3.44772 25 4 25H26C26.5523 25 27 24.5523 27 24V6C27 5.44772 26.5523 5 26 5Z" fill="white"/>
+<path d="M5.12725 14.6987C6.49536 16.884 9.34983 6.44673 7.18917 7.02306C4.94237 7.62127 12.0718 14.8808 12.9495 12.8346C13.7932 10.8675 3.76604 12.524 5.12725 14.6987Z" stroke="#FF213E" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.5 8H12.5C12.2239 8 12 8.22386 12 8.5C12 8.77614 12.2239 9 12.5 9H23.5C23.7761 9 24 8.77614 24 8.5C24 8.22386 23.7761 8 23.5 8Z" fill="#FF213E"/>
+<path opacity="0.8" d="M24.5 16.5H5.5V22.5H24.5V16.5Z" stroke="#CACCD7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17V19H18V17H19V19H24V20H19V22H18V20H12V22H11V20H6V19H11V17H12Z" fill="#CACCD7" fill-opacity="0.8"/>
+</svg>

package/src/components/animations/animations.vue

@@ -41,4 +41,42 @@
     border-bottom-color: $color-gray-3;
   }
 }
+
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
 </style>

package/src/components/emoji-picker/emoji-picker.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="ecs-emoji-picker scrollbar scrollbar-sml" ref="picker" :class="bordered ? 'bordered' : ''" :style="pickerStyles">
+    <ecs-tab-bar>
+      <ecs-tab-button @click="switchTab('all')" :show="activeTab == 'all'" icon="search" aria-label="All Emojis" aria-controls="allCategories" />
+      <ecs-tab-button @click="switchTab('SmileysEmotion')" :show="activeTab == 'SmileysEmotion'" icon="emoji" aria-label="Smileys & Emotion" aria-controls="SmileysEmotion" />
+      <ecs-tab-button @click="switchTab('PeopleBody')" :show="activeTab == 'PeopleBody'" icon="hand" aria-label="People & Body" aria-controls="PeopleBody" />
+      <ecs-tab-button @click="switchTab('AnimalsNature')" :show="activeTab == 'AnimalsNature'" icon="leaf" aria-label="Animals & Nature" aria-controls="AnimalsNature" />
+      <ecs-tab-button @click="switchTab('FoodDrink')" :show="activeTab == 'FoodDrink'" icon="food-drink" aria-label="Food & Drink" aria-controls="FoodDrink" />
+      <ecs-tab-button @click="switchTab('TravelPlaces')" :show="activeTab == 'TravelPlaces'" icon="plane" aria-label="Travel & Places" aria-controls="TravelPlaces" />
+      <ecs-tab-button @click="switchTab('Activities')" :show="activeTab == 'Activities'" icon="basketball" aria-label="Activities" aria-controls="Activities" />
+      <ecs-tab-button @click="switchTab('Objects')" :show="activeTab == 'Objects'" icon="key" aria-label="Objects" aria-controls="Objects" />
+      <ecs-tab-button @click="switchTab('Symbols')" :show="activeTab == 'Symbols'" icon="warning" aria-label="Symbols" aria-controls="Symbols" />
+      <ecs-tab-button @click="switchTab('Flags')" :show="activeTab == 'Flags'" icon="flag" aria-label="Flags" aria-controls="Flags" />
+    </ecs-tab-bar>
+    <div v-if="activeTab == 'all'" class="search">
+      <ecs-input-search v-model="search" :show-clear="showClear" placeholder="Search all emoji" type="subtle" />
+    </div>
+    <ecs-emoji-list @emoji="onEmojiSelected" :search="search" :filter-tab="activeTab" />
+  </div>
+</template>
+
+<script>
+import EcsInputSearch from '../input-search/input-search'
+import EcsTabBar from '../tab-bar/tab-bar'
+import EcsTabButton from '../tab-button/tab-button'
+import EcsEmojiList from './list.vue';
+
+export default {
+  components: {
+    EcsInputSearch,
+    EcsTabBar,
+    EcsTabButton,
+    EcsEmojiList
+  },
+
+  props: {
+    /** Defines the width of the Emoji Picker component. */
+    width: {
+      type: Number,
+      default: 420,
+      validator: (value) => {
+        return value >= 420;
+      }
+    },
+    /** Defines the height of the Emoji Picker component. If not set, the sticky scroll element are bound to the parent scroll container (or window). */
+    height: {
+      type: Number
+    },
+    /** Determines if the Emoji picker should be bordered. */
+    bordered: {
+      type: Boolean
+    }
+  },
+
+  data() {
+    return {
+      search: '',
+      activeTab: 'all'
+    }
+  },
+
+  computed: {
+    showClear() {
+      return this.search.length > 0;
+    },
+
+    conditionalHeight() {
+      return this.bordered ? (this.height || 400) : this.height;
+    },
+
+    pickerStyles() {
+      return {
+        width: `${this.width}px`,
+        height: `${this.conditionalHeight}px`,
+        overflow: this.bordered || this.height ? 'auto' : 'unset'
+      }
+    }
+  },
+
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+      this.$refs.picker.scrollTop = 0;
+    },
+
+    onEmojiSelected(emoji) {
+      /** Returns an object that contains the selected emoji code and character. */
+      this.$emit('emoji', {
+        code: emoji.codes,
+        char: emoji.char
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-emoji-picker{
+  border-radius: 6px;
+  z-index: 1;
+
+  &.bordered{
+    border: 1px solid $color-gray-4;
+
+    .ecs-tab-bar{
+      padding-left: $spacing-5;
+    }
+  }
+}
+
+.search{
+  width: 100%;
+  position: sticky;
+  top: 41px;
+  background: rgba($color-white, .6);
+  padding: $spacing-10;
+  backdrop-filter: blur(24px);
+  box-shadow: 0 1px 0 rgba($color-gray-14, .1);
+  z-index: 2;
+}
+
+.ecs-tab-bar{
+  background: rgba($color-white, .6);
+  backdrop-filter: blur(24px);
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  border-radius: 6px 6px 0 0;
+}
+
+.ecs-tab-button :deep(.icon){
+  width: 24px;
+  height: 24px;
+}
+</style>

package/src/components/emoji-picker/emoji.vue

@@ -0,0 +1,64 @@
+<template>
+  <button 
+    @click="click(id, char)"
+    :id="id"
+    class="emoji">
+    {{ char }}
+</button>
+</template>
+
+<script>
+export default {
+  props: {
+    char: String,
+    id: String,
+  },
+
+  methods: {
+    click(emojiId, emojiChar) {
+      // Emit clicked emoji with id
+      this.$emit('emoji', emojiId, emojiChar);
+
+      // Add class with animation after click, remove after timeout
+      document.getElementById(emojiId).classList.add('clicked');
+      window.setTimeout(() => {
+        document.getElementById(emojiId).classList.remove('clicked');
+      }, 800);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.emoji{
+  font-size: 24px;
+  cursor: pointer;
+  transition: 0.15s transform, 0.15s background-color;
+  text-align: center;
+  margin: $spacing-10;
+  padding: 0;
+  width: $spacing-40;
+  height: $spacing-40;
+  line-height: $spacing-40;
+  background: $color-gray-2;
+  border-radius: 50%;
+  user-select: none;
+
+  &:focus-visible{
+    outline: 2px solid $color-blue-9;
+    outline-offset: 2px;
+  }
+
+  &:hover{
+    transform: scale(1.1);
+    background: $color-gray-3;
+  }
+
+  &.clicked {
+    animation: bounceIn;
+    animation-duration: .8s;
+  }
+}
+</style>

package/src/components/emoji-picker/list.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="categories" id="allCategories">
+    <div
+      v-for="category in filteredCategories"
+      v-if="filterTab === 'all' || filterTab === sanitize(category)"
+      :key="category"
+      :id="sanitize(category)"
+      class="category">
+      <h2 :style="{top: filterTab === 'all' ? '89px' : '41px'}">{{ category }}</h2>
+      <div class="list">
+        <ecs-emoji
+          v-for="emoji in getEmojiList(emojiArray, category, search)"
+          @emoji="emitEmoji(emoji)"
+          :char="emoji.char"
+          :key="emoji.codes"
+          :id="emoji.codes"
+          :title="emoji.name" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EcsEmoji from './emoji.vue';
+import emoji from 'emoji.json';
+import searchArray from 'js-search-array';
+
+export default {
+  components: { EcsEmoji },
+
+  props: {
+    search: String,
+    filterTab: String
+  },
+
+  data() {
+    return {
+      // Bind emojiArray as emoji.json list
+      emojiArray: [],
+      categories: [],
+    };
+  },
+
+  computed: {
+    filteredCategories() {
+      return this.categories.filter((category) => {
+        const emojis = this.getEmojiList(this.emojiArray, category, this.search);
+        return emojis.length > 0;
+      });
+    },
+
+    sanitize() {
+      return (str) => str.replace(/[^a-zA-Z0-9]/g, '');
+    }
+  },
+
+  methods: {
+    emitEmoji(emoji) {
+      this.$emit('emoji', emoji);
+    },
+
+    getEmojiList(emojiArray, category, search) {
+      if (search.length < 3) {
+        // Return array with all emojis for category, filter out codes with spaces to remove skin-tone variations from returned list. Allow flags to have skin-tone variations.
+        return emojiArray.filter(
+          (emoji) => emoji.group === category
+        );
+      }
+
+      // Return array with searched emoji for category if length > 3
+      return searchArray(search, emojiArray.filter(
+        (emoji) => emoji.group === category
+      ), 'name');
+    },
+  },
+
+  mounted() {
+    // List of blacklisted emojis
+    const blacklist = new Set(['☺️', '☺', '☹️', '☹', '☠', '❣', '❤', '🕳️', '👁‍🗨️', '👁️‍🗨', '👁‍🗨', '🗨', '🗯️']);
+    // Filter array
+    const filtered = emoji.filter((item) => {
+      if (item.group === 'Flags') {
+        return true;
+      }
+      return !blacklist.has(item.char) && item.group !== 'Component' && !item.codes.includes(' ');
+    })
+    // Set variable with emojis as filtered list
+    this.emojiArray = filtered;
+    // Get list of categories
+    this.categories = [...new Set(filtered.map((emoji) => emoji.group))];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.list{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &:after{
+    content: '';
+    flex: auto;
+  }
+
+  button{
+    display: inline-block;
+  }
+}
+
+.category{
+  content-visibility: auto;
+
+  h2{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
+    background: rgba($color-white, .9);
+    backdrop-filter: blur(24px);
+    padding: $spacing-5 $spacing-10;
+    position: sticky;
+    z-index: 1;
+  }
+}
+</style>

package/src/components/file-icon/file-icon.vue

@@ -10,12 +10,15 @@
         type: String,
         validator: v => [
           'audio',
+          'card-report',
           'docx',
           'email',
+          'excerpt-report',
           'exe',
           'image',
           'native',
           'pdf',
+          'pdf-table',
           'ppt',
           'rtf',
           'transcript-mini',
@@ -63,6 +66,10 @@
     background-image: url('../../assets/images/file-icons/audio.svg');
   }
 
+  &-card-report{
+    background-image: url('../../assets/images/file-icons/card-report.svg');
+  }
+
   &-docx{
     background-image: url('../../assets/images/file-icons/docx.svg');
   }
@@ -75,6 +82,10 @@
     background-image: url('../../assets/images/file-icons/exe.svg');
   }
 
+  &-excerpt-report{
+    background-image: url('../../assets/images/file-icons/excerpt-report.svg');
+  }
+
   &-image{
     background-image: url('../../assets/images/file-icons/image.svg');
   }
@@ -87,6 +98,10 @@
     background-image: url('../../assets/images/file-icons/pdf.svg');
   }
 
+  &-pdf-table{
+    background-image: url('../../assets/images/file-icons/pdf-table.svg');
+  }
+
   &-ppt{
     background-image: url('../../assets/images/file-icons/ppt.svg');
   }