@everchron/ec-shards 0.0.12

package/src/assets/images/selectable-tiles-illustrations/overlay-files.svg

@@ -0,0 +1 @@
+<svg fill="none" height="142" viewBox="0 0 143 142" width="143" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="41" y="0"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1620"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1620" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="37" y="4"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1620"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1620" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="33" y="8"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1620"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1620" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="128" width="102" x="0" y="14"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1620"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1620" mode="normal" result="shape"/></filter><g filter="url(#a)" opacity=".3"><rect fill="#fff" height="116" rx="8" width="94" x="45" y="3"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="45.5" y="3.5"/></g><g filter="url(#b)" opacity=".6"><rect fill="#fff" height="116" rx="8" width="94" x="41" y="7"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="41.5" y="7.5"/></g><g filter="url(#c)"><rect fill="#fff" height="116" rx="8" width="94" x="37" y="11"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="37.5" y="11.5"/></g><path d="m45 21h78v8h-78z" fill="#ecedf2"/><path d="m45.5 29.5h77v82h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 30.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 39.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 48.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 57.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 66.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 75.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 84.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 93.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m45.5 102.5h77v9h-77z" fill="#fff" stroke="#ecedf2"/><path d="m56 31h1v80h-1z" fill="#ecedf2"/><path d="m76 31h1v80h-1z" fill="#ecedf2"/><path d="m109 31h1v80h-1z" fill="#ecedf2"/><path d="m45 57h78v10h-78z" fill="#e9a032" opacity=".16"/><path d="m45 93h78v10h-78z" fill="#e9a032" opacity=".16"/><path d="m45 75h78v10h-78z" fill="#e9a032" opacity=".16"/><g filter="url(#d)"><rect fill="#fff" height="120" rx="8" width="94" x="4" y="17"/><rect height="119" rx="7.5" stroke="#d7dae1" width="93" x="4.5" y="17.5"/></g><path d="m77 100.5c-8.5611 0-15.5 6.939-15.5 15.5s6.9389 15.5 15.5 15.5 15.5-6.939 15.5-15.5-6.9389-15.5-15.5-15.5z" fill="#b9bcc2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path d="m83.0091 114.797-7.2122 7.213h4.8081" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m73.3943 109.988h4.8096l-7.2137 7.215" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g clip-rule="evenodd" fill="#d7dae1" fill-rule="evenodd"><path d="m26.7771 91h4.4447c1.534 0 2.7782-1.2371 2.7782-2.7638l-.9267-7.4712c0-1.5267-1.2424-2.765-2.777-2.765h-2.5926c-1.534 0-2.7782 1.2366-2.7782 2.765l-.9255 7.4706c-.0006 1.5273 1.2431 2.7644 2.7771 2.7644zm.2229-8.7776c0-1.2281.8954-2.2224 2-2.2224s2 .9943 2 2.2224v.5541c0 1.228-.8954 2.2235-2 2.2235s-2-.9955-2-2.2235z"/><path d="m25 74.5002c0-.8286.7179-1.5002 1.6037-1.5002l3.7926.001c.8863 0 1.6037.6706 1.6037 1.4992 0 .8281-.7174 1.4998-1.6037 1.4998h-3.7926c-.8858-.0015-1.6037-.6721-1.6037-1.4998z"/><path d="m32 70v2h-4v-2z"/><path d="m32 66v2h-4v-2z"/><path d="m29 68v2h-4v-2z"/><path d="m29 64v2h-4v-2z"/><path d="m32 62v2h-4v-2z"/><path d="m32 58v2h-4v-2z"/><path d="m29 60v2h-4v-2z"/><path d="m29 56v2h-4v-2z"/><path d="m32 54v2h-4v-2z"/><path d="m32 50v2h-4v-2z"/><path d="m29 52v2h-4v-2z"/><path d="m29 48v2h-4v-2z"/><path d="m32 46v2h-4v-2z"/><path d="m32 42v2h-4v-2z"/><path d="m29 44v2h-4v-2z"/><path d="m29 40v2h-4v-2z"/><path d="m32 34v2h-4v-2z"/><path d="m32 30v2h-4v-2z"/><path d="m29 32v2h-4v-2z"/><path d="m32 38v2h-4v-2z"/><path d="m29 36v2h-4v-2z"/><path d="m29 28v2h-4v-2z"/><path d="m32 26v2h-4v-2z"/><path d="m32 22v2h-4v-2z"/><path d="m29 24v2h-4v-2z"/><path d="m29 20v2h-4v-2z"/><path d="m32 18v2h-7v-2z"/></g></svg>

package/src/assets/images/selectable-tiles-illustrations/overlay-metadata.svg

@@ -0,0 +1 @@
+<svg fill="none" height="142" viewBox="0 0 141 142" width="141" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="35" y="0"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1495"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1495" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="31" y="4"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1495"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1495" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="124" width="102" x="27" y="8"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1495"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1495" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="126" width="105" x="0" y="16"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.278431 0 0 0 0 0.294118 0 0 0 0 0.376471 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_550_1495"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_550_1495" mode="normal" result="shape"/></filter><filter id="e" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="32.5" width="33" x="65" y="21"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_550_1495" stdDeviation="2"/></filter><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="74.5" x2="85.5" y1="46.5" y2="36"><stop offset="0" stop-color="#bec2ca"/><stop offset="1" stop-color="#d7dae1"/></linearGradient><mask id="g" height="94" maskUnits="userSpaceOnUse" width="82" x="12" y="28"><path d="m12.5 122v-94h63l18.5 18.5v75.5z" fill="#fff"/></mask><g filter="url(#a)" opacity=".3"><rect fill="#fff" height="116" rx="8" width="94" x="39" y="3"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="39.5" y="3.5"/></g><g filter="url(#b)" opacity=".6"><rect fill="#fff" height="116" rx="8" width="94" x="35" y="7"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="35.5" y="7.5"/></g><g filter="url(#c)"><rect fill="#fff" height="116" rx="8" width="94" x="31" y="11"/><rect height="115" rx="7.5" stroke="#d7dae1" width="93" x="31.5" y="11.5"/></g><path d="m39 21h78v8h-78z" fill="#ecedf2"/><g fill="#fff"><path d="m39.5 29.5h77v82h-77z" stroke="#ecedf2"/><path d="m39.5 30.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 39.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 48.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 57.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 66.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 75.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 84.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 93.5h77v9h-77z" stroke="#ecedf2"/><path d="m39.5 102.5h77v9h-77z" stroke="#ecedf2"/></g><path d="m50 31h1v80h-1z" fill="#ecedf2"/><path d="m70 31h1v80h-1z" fill="#ecedf2"/><path d="m103 31h1v80h-1z" fill="#ecedf2"/><path d="m39 57h78v10h-78z" fill="#858e9e" opacity=".1"/><path d="m39 93h78v10h-78z" fill="#858e9e" opacity=".1"/><path d="m39 75h78v10h-78z" fill="#858e9e" opacity=".1"/><g filter="url(#d)"><path d="m12 137h81c4.4183 0 8-3.582 8-8v-78l-30.5-32h-58.5c-4.41828 0-8 3.5817-8 8v102c0 4.418 3.58172 8 8 8z" fill="#fff"/><path d="m93 136.5h-81c-4.14214 0-7.5-3.358-7.5-7.5v-102c0-4.1421 3.35786-7.5 7.5-7.5h58.2858l30.2142 31.7001v77.7999c0 4.142-3.3579 7.5-7.5 7.5z" stroke="#d7dae1"/></g><g mask="url(#g)"><path d="m14 29h70l8 8h-78z" fill="#ecedf2"/><g fill="#fff" stroke="#ecedf2"><path d="m14.5 37.5h77v82h-77z"/><path d="m14.5 38.5h77v9h-77z"/><path d="m14.5 47.5h77v9h-77z"/><path d="m14.5 56.5h77v9h-77z"/><path d="m14.5 65.5h77v9h-77z"/><path d="m14.5 74.5h77v9h-77z"/><path d="m14.5 83.5h77v9h-77z"/><path d="m14.5 92.5h77v9h-77z"/><path d="m14.5 101.5h77v9h-77z"/><path d="m14.5 110.5h77v9h-77z"/></g><path d="m25 39h1v80h-1z" fill="#ecedf2"/><path d="m45 39h1v80h-1z" fill="#ecedf2"/><path d="m78 39h1v80h-1z" fill="#ecedf2"/><path d="m14 65h78v10h-78z" fill="#0eba65" opacity=".1"/><path d="m14 83h78v10h-78z" fill="#0eba65" opacity=".1"/><path d="m14 101h78v10h-78z" fill="#0eba65" opacity=".1"/></g><path d="m80 100.5c-8.5611 0-15.5 6.939-15.5 15.5s6.9389 15.5 15.5 15.5 15.5-6.939 15.5-15.5-6.9389-15.5-15.5-15.5z" fill="#b9bcc2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path d="m86.0091 114.797-7.2122 7.213h4.8081" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m76.3943 109.988h4.8096l-7.2137 7.215" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g filter="url(#e)" opacity=".15"><path d="m94 49-22-24-3 24.5z" fill="#1d1f28"/></g><path d="m100.5 51-30-31.5 1.5 26.5z" fill="#fff" stroke="url(#f)" stroke-linejoin="round"/></svg>

package/src/assets/images/spinner/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94" viewBox="0 0 94 94"><path fill="#DBDFE3" fill-rule="evenodd" d="M60.4964472,40.7271455 C61.2834236,40.2861551 61.935164,40.6095848 61.99545,41.4413703 L62,41.5699187 L62,54.0392506 C62,54.9120599 61.4001029,55.9725198 60.6406141,56.4786984 L60.4964472,56.5669303 L57.8646118,58.0406368 L56.5167139,61.4827697 C56.2828554,62.3318416 55.5890462,62.5515221 54.9412709,62.0087466 L54.8394469,61.9166896 L53.4137216,60.5334365 L49.3714253,62.8027695 C48.5857799,63.2431504 47.9328352,62.9208527 47.8724316,62.086965 L47.8678725,61.9580763 L47.8678725,49.4889578 C47.8678725,48.6173532 48.4690075,47.5572476 49.2274769,47.0497726 L49.3714253,46.9612781 L60.4964472,40.7271455 Z M32,41.5699187 C32,40.6879379 32.6148504,40.3015095 33.3872183,40.6666981 L33.5041977,40.7271455 L44.6292197,46.9612781 C45.4069375,47.3967792 46.0538206,48.4312317 46.1272334,49.3235039 L46.1341699,49.4889578 L46.1341699,61.9580763 C46.1341699,62.8424952 45.518637,63.2278787 44.746204,62.863138 L44.6292197,62.8027695 L33.5041977,56.5669303 C32.7264799,56.132935 32.0802634,55.0982877 32.006929,54.2049202 L32,54.0392506 L32,41.5699187 Z M45.4974685,31.34752 C46.268003,30.9150507 47.4993465,30.8862194 48.331934,31.2610261 L48.503929,31.34752 L59.6289509,37.5814392 C60.4138577,38.0231512 60.4531031,38.7297889 59.746687,39.196073 L59.6289509,39.2676257 L48.503929,45.5011183 C47.7326922,45.9351804 46.5013018,45.9641179 45.6693229,45.5879307 L45.4974685,45.5011183 L34.3724465,39.2676257 C33.5855994,38.8280417 33.5462571,38.1215103 34.2544194,37.6533111 L34.3724465,37.5814392 L45.4974685,31.34752 Z M43.8428832,58.6877834 C43.7271095,58.88149 43.5162015,58.99125 43.2986287,58.99125 C43.1928522,58.99125 43.0843883,58.9641567 42.9859215,58.9111433 L34.4728482,54.1413306 C34.174868,53.9721573 34.0710265,53.600104 34.2433433,53.309544 C34.41695,53.0175974 34.8009273,52.919464 35.1015949,53.0860774 L43.6133783,57.8559968 C43.8828181,58.0071008 43.9932643,58.3234879 43.88657,58.5980834 L43.8428832,58.6877834 Z M43.8428832,54.5301305 C43.7271095,54.7251172 43.5162015,54.8323172 43.2986287,54.8323172 C43.1928522,54.8323172 43.0843883,54.8077838 42.9859215,54.7522105 L34.4728482,49.9823977 C34.174868,49.8145044 34.0710265,49.4411711 34.2433433,49.1506112 C34.41695,48.8599445 34.8009273,48.7598912 35.1015949,48.9284245 L43.6133783,53.698344 C43.8828181,53.8482959 43.9932643,54.1645679 43.88657,54.440085 L43.8428832,54.5301305 Z M43.8428832,50.2665577 C43.7271095,50.4621843 43.5162015,50.5713043 43.2986287,50.5713043 C43.1928522,50.5713043 43.0843883,50.544211 42.9859215,50.4892777 L34.4728482,45.7194649 C34.174868,45.5522116 34.0710265,45.1791983 34.2433433,44.8883183 C34.41695,44.5973317 34.8009273,44.4972784 35.1015949,44.6658117 L43.6133783,49.4347711 C43.8828181,49.5864511 43.9932643,49.9034143 43.88657,50.1771861 L43.8428832,50.2665577 Z"/></svg>

package/src/components/action-toolbar/action-toolbar.vue

@@ -0,0 +1,61 @@
+<template>
+  <transition name="action-bar">
+    <div class="ecs-action-toolbar">
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import EcsCheckbox from '../checkbox/checkbox'
+
+  export default {
+    components: { EcsCheckbox },
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-action-toolbar{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 $spacing-20;
+  z-index: 2;
+  height: $layout-actionbar-height;
+  background: #FFF;
+  border-bottom: 1px solid $color-gray-3;
+  position: relative;
+}
+
+.action-bar-enter-active {
+  transition: all .3s;
+}
+
+.action-bar-leave-active {
+  transition: all .3s;
+}
+
+.action-bar-enter,
+.action-bar-leave-to{
+  opacity: 0;
+  margin-top: -$layout-actionbar-height;
+}
+</style>
+
+<style lang="scss">
+.ecs-action-toolbar{
+  .divider{
+    height: 26px;
+    width: 1px;
+    min-width: 1px;
+    margin: 0 8px;
+    background: #E2E3E4;
+  }
+
+  .ecs-button{
+    margin: 0 4px;
+  }
+}
+</style>

package/src/components/alert/alert.vue

@@ -0,0 +1,274 @@
+<template>
+  <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']">
+    <button v-if="dismissable" @click="dismiss" class="close">
+      <ecs-icon type="close" size="20" />
+    </button>
+    <div class="ecs-alert-inner">
+      <h4 v-if="headline" class="ecs-alert-headline">
+        <ecs-icon v-if="icon" :type="icon" size="20" />
+        {{ headline }}
+      </h4>
+      <div v-if="$slots.default" class="ecs-alert-content">
+        <slot></slot>
+      </div>
+    </div>
+    <button v-if="actionLabel" @click="$emit('action')" class="action">{{ actionLabel }}</button>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+
+    props: {
+      /** The alert variant, which defines it's background color. */
+      type: {
+        type: String,
+        validator: v => ['success', 'info', 'error', 'warning', 'important'].includes(v),
+        default: 'info'
+      },
+      /** When set to true, a close button is displayed which allows the user to dismiss the alert. */
+      dismissable: {
+        type: Boolean,
+        default: false
+      },
+      /** The label of an optional action button at the bottom of the alert. If this prop is passed, the button will appear and emit the @action event on click. */
+      actionLabel: {
+        type: String,
+        default: null
+      },
+      /** If passed, a headline will appear at the top of the alert. */
+      headline: {
+        type: String
+      },
+      /** If passed, an icon will appear. Only works together with the `headline` prop. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** If true, the alert will have no rounded corners and no margins. This is usefull when the alert directly touches other UI elements. */
+      inset: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        dismissed: false
+      }
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-alert-${this.type}`
+        return this.type
+      },
+      show(){
+        return !this.dismissed
+      }
+    },
+
+    methods: {
+      dismiss() {
+        this.dismissed = true;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-alert{
+  position: relative;
+  margin-bottom: $spacing-30;
+  border-radius: $border-radius-small;
+  font-size: $type-scale-3-font-size;
+  text-align: left;
+
+  &-inset{
+    margin: 0;
+    border-radius: 0;
+  }
+
+  &-inner{
+    padding: $spacing-20;
+
+    > *:first-child{
+      margin-top: 0;
+    }
+
+    > *:last-child{
+      margin-bottom: 0;
+    }
+
+    a{
+      text-decoration: underline;
+    }
+  }
+
+  &-info{
+    background-color: rgba($color-gray-4, .25);
+    color: rgba($color-gray-14, .8);
+
+    a{
+      color: rgba($color-gray-14, .8);
+    }
+  }
+
+  &-error{
+    background-color: $color-red-3;
+    color: rgba($color-red-14, .8);
+
+    a{
+      color: rgba($color-red-14, .8);
+    }
+  }
+
+  &-success{
+    background-color: $color-green-3;
+    color: rgba($color-green-14, .8);
+
+    a{
+      color: rgba($color-green-14, .8);
+    }
+  }
+
+  &-warning{
+    background-color: $color-yellow-2;
+    color: rgba($color-yellow-14, .9);
+
+    a{
+      color: rgba($color-yellow-14, .9);
+    }
+  }
+
+  &-important{
+    background-color: $color-blue-3;
+    color: rgba($color-blue-15, .8);
+
+    a{
+      color: rgba($color-blue-15, .8);
+    }
+  }
+
+  .action{
+    display: block;
+    text-align: center;
+    padding: 9px $spacing-20;
+    font-size: $type-scale-3-font-size;
+    font-weight: $font-weight-medium;
+    color: currentColor;
+    width: 100%;
+    border-radius: 0 0 3px 3px;
+    position: relative;
+
+    &:before, 
+    &:after{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: currentColor;
+      transition: .2s;
+    }
+
+    &:after{
+      bottom: 0;
+      opacity: .05;
+    }
+
+    &:before{
+      height: 1px;
+      opacity: .1;
+    }
+
+    &:hover{
+      &:after{
+        opacity: .08;
+      }
+
+      &:before{
+        opacity: .12;
+      }
+    }
+  }
+
+  &-headline{
+    font-weight: $font-weight-medium;
+    display: flex;
+    align-items: center;
+    filter: brightness(90%);
+    margin-bottom: 8px;
+
+    .icon{
+      margin: -2px 4px -2px -2px;
+    }
+  }
+}
+
+.ecs-alert-dismissable {
+  .ecs-alert-inner{
+    padding-right: ( $spacing-20 * 3);
+  }
+
+  .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    height: 20px;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+
+    &:after{
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: $border-radius-small;
+      background: currentColor;
+      opacity: .1;
+      transition: .2s;
+    }
+
+    &:hover{
+      &:after{
+        opacity: .15;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.ecs-alert-content{
+  p, ul{
+    margin: 10px 0;
+  }
+
+  ul{
+    list-style-type: disc;
+    padding-left: 18px;
+  }
+
+  li{
+    margin-top: 2px;
+  }
+
+  > *:first-child{
+    margin-top: 0;
+  }
+
+  > *:last-child{
+    margin-bottom: 0;
+  }
+}
+</style>

package/src/components/animations/animations.vue

@@ -0,0 +1,44 @@
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+@keyframes spin{
+  0%{
+    transform: rotate(0deg);
+  }
+
+  100%{
+    transform: rotate(-360deg);
+  }
+}
+
+// Table entry added animations
+@keyframes highlight-to-white{
+  0% {
+    background: $color-yellow-3;
+  }
+
+  100% {
+    background: $color-white;
+  }
+}
+
+@keyframes highlight-to-gray{
+  0% {
+    background: $color-yellow-3;
+  }
+
+  100% {
+    background: #FBFBFC;
+  }
+}
+
+@keyframes border-added{
+  0% {
+    border-bottom-color: $color-yellow-4;
+  }
+
+  100% {
+    border-bottom-color: $color-gray-3;
+  }
+}
+</style>

package/src/components/audio/audio.vue

@@ -0,0 +1,46 @@
+<template>
+  <audio class="ecs-audio" :controls="controls" :autoplay="autoplay" :loop="loop">
+    <source v-if="mp3Source" :src="mp3Source" type="audio/mp3" />
+    <source v-if="oggSource" :src="oggSource" type="audio/ogg" />
+  </audio>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** If true, the player will autoplay once it shows up in the DOM. */
+      autoplay: {
+        type: Boolean,
+        default: false
+      },
+      /** If true, the playback will loop. */
+      loop: {
+        type: Boolean,
+        default: false
+      },
+      /** Defines if the audio player should have any controls. */
+      controls: {
+        type: Boolean,
+        default: true
+      },
+      /** The absolute path to the MP3 source file. */
+      mp3Source: {
+        type: String,
+        default: null
+      },
+      /** The absolute path to the OGG source file. */
+      oggSource: {
+        type: String,
+        default: null
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.ecs-audio{
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
+</style>

package/src/components/avatar/avatar.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="avatar" :style="[style, customStyle]" :class="partyClass">
+    <span v-if="!this.image">{{ userInitial }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'avatar',
+  props: {
+    /** In some situations, an avatar should also reflect the party side (witness profiles, entities). To add a badge with a party color to the avatar, set the `party` attribute to one of the available options: */
+    party: {
+      type: String,
+      validator: v => ['client', 'opposition', 'court', 'joint', 'other', null].includes(v),
+      default: null
+    },
+    /** The full name of the User, eg. "Franklyn Meerkat" */
+    name: {
+      type: String,
+      required: true
+    },
+    /** Overwrite the generated Initials, if needed. */
+    initials: {
+      type: String
+    },
+    /** Overwrite the background color (HEX), if needed. */
+    backgroundColor: {
+      type: String
+    },
+    /** Overwrite the color (HEX), if needed. */
+    color: {
+      type: String
+    },
+    /** Adds custom styles (plain CSS) to the avatar. */
+    customStyle: {
+      type: Object
+    },
+    /** Width and height of the avatar, in pixels. */
+    size: {
+      type: Number,
+      default: 36
+    },
+    /** Absolute path to the users avatar image. */
+    image: {
+      type: String
+    },
+    /** Defines if the avatar should be rendered as a circle, or square. */
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    /** How much the avatar background should be lightened up. */
+    lighten: {
+      type: Number,
+      default: 80
+    }
+  },
+  data () {
+    return {
+      backgroundColors: [
+        '#AAEDE8',
+        '#A6EDC4',
+        '#ECEAFF',
+        '#ADE4F4',
+        '#D5E6AB',
+        '#CCE3FC',
+        '#C1EAFD',
+        '#FEDDED',
+        '#F2F3F5',
+        '#AAEDE8',
+        '#A6EDC4',
+        '#ECEAFF',
+        '#ADE4F4',
+        '#D5E6AB',
+        '#CCE3FC',
+        '#C1EAFD',
+        '#FEDDED'
+      ]
+    }
+  },
+  mounted () {
+    this.$emit('avatar-initials', this.name, this.userInitial)
+  },
+  computed: {
+    background () {
+      return this.backgroundColor || this.randomBackgroundColor(this.name.length, this.backgroundColors)
+    },
+    isImage () {
+      return Boolean(this.image)
+    },
+    style () {
+      const style = {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        borderRadius: this.rounded ? '50%' : '2px'
+      }
+      const imgBackgroundAndFontStyle = {
+        background: `transparent url(${this.image}) no-repeat center center/cover`
+      }
+      const initialBackgroundAndFontStyle = {
+        backgroundColor: this.background,
+        fontSize: Math.floor(this.size / 2.5) + 'px'
+      }
+      const backgroundAndFontStyle = (this.isImage)
+        ? imgBackgroundAndFontStyle
+        : initialBackgroundAndFontStyle
+      Object.assign(style, backgroundAndFontStyle)
+      return style
+    },
+    userInitial () {
+      const initials = this.initials || this.initial(this.name)
+      return initials
+    },
+    partyClass() {
+      if (this.party && this.party !== '')
+        return `avatar-party party-${this.party}`
+      return this.party
+    }
+  },
+  methods: {
+    initial (name) {
+      let parts = name.split(/[ -]/)
+      let initials = ''
+      for (var i = 0; i < parts.length; i++) {
+        initials += parts[i].charAt(0)
+      }
+      if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '')
+      }
+      initials = initials.substr(0, 3).toUpperCase()
+      return initials
+    },
+    randomBackgroundColor (seed, colors) {
+      return colors[seed % (colors.length)]
+    },
+    lightenColor (hex, amt) {
+      // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
+      var usePound = false
+      if (hex[0] === '#') {
+        hex = hex.slice(1)
+        usePound = true
+      }
+      var num = parseInt(hex, 16)
+      var r = (num >> 16) + amt
+      if (r > 255) r = 255
+      else if (r < 0) r = 0
+      var b = ((num >> 8) & 0x00FF) + amt
+      if (b > 255) b = 255
+      else if (b < 0) b = 0
+      var g = (num & 0x0000FF) + amt
+      if (g > 255) g = 255
+      else if (g < 0) g = 0
+      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.avatar{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  font-weight: 700;
+  color: rgba(#000, .2);
+
+  &-party{
+    &:before{
+      content: "";
+      width: 12px;
+      height: 12px;
+      position: absolute;
+      border: 2px solid #FFF;
+      border-radius: 100%;
+      bottom: -4px;
+      right: -4px;
+    }
+  }
+
+  &.party-client:before{
+    background: $color-party-client-background;
+  }
+
+  &.party-opposition:before{
+    background: $color-party-opposing-background;
+  }
+
+  &.party-court:before{
+    background: $color-party-court-background;
+  }
+
+  &.party-other:before{
+    background: $color-party-other-background;
+  }
+
+  &.party-joint:before{
+    background: $color-party-joint-background;
+  }
+}
+</style>