@dpa-id-components/dpa-shared-components 16.0.0 → 17.0.0

package/src/assets/icons/stop.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/story.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.62141 10.75H9.92141C10.1999 10.75 10.467 10.6414 10.6639 10.448C10.8608 10.2546 10.9714 9.99225 10.9714 9.71875V3.53125C10.9714 3.25775 10.8608 2.99544 10.6639 2.80205C10.467 2.60865 10.1999 2.5 9.92141 2.5H3.62141C3.34293 2.5 3.07586 2.60865 2.87895 2.80205C2.68204 2.99544 2.57141 3.25775 2.57141 3.53125V9.71875C2.57141 9.99225 2.68204 10.2546 2.87895 10.448C3.07586 10.6414 3.34293 10.75 3.62141 10.75ZM4.67141 4.5625H8.87141V8.6875H4.67141V4.5625ZM14.1214 6.625H19.5214C19.7999 6.625 20.067 6.51635 20.2639 6.32295C20.4608 6.12956 20.5714 5.86725 20.5714 5.59375C20.5714 5.32025 20.4608 5.05794 20.2639 4.86455C20.067 4.67115 19.7999 4.5625 19.5214 4.5625H14.1214C13.8429 4.5625 13.5759 4.67115 13.3789 4.86455C13.182 5.05794 13.0714 5.32025 13.0714 5.59375C13.0714 5.86725 13.182 6.12956 13.3789 6.32295C13.5759 6.51635 13.8429 6.625 14.1214 6.625ZM14.1214 16.9375H3.62141C3.34293 16.9375 3.07586 17.0461 2.87895 17.2395C2.68204 17.4329 2.57141 17.6952 2.57141 17.9688C2.57141 18.2423 2.68204 18.5046 2.87895 18.698C3.07586 18.8914 3.34293 19 3.62141 19H14.1214C14.3999 19 14.667 18.8914 14.8639 18.698C15.0608 18.5046 15.1714 18.2423 15.1714 17.9688C15.1714 17.6952 15.0608 17.4329 14.8639 17.2395C14.667 17.0461 14.3999 16.9375 14.1214 16.9375ZM19.5214 12.8125H3.62141C3.34293 12.8125 3.07586 12.9211 2.87895 13.1145C2.68204 13.3079 2.57141 13.5702 2.57141 13.8438C2.57141 14.1173 2.68204 14.3796 2.87895 14.573C3.07586 14.7664 3.34293 14.875 3.62141 14.875H19.5214C19.7999 14.875 20.067 14.7664 20.2639 14.573C20.4608 14.3796 20.5714 14.1173 20.5714 13.8438C20.5714 13.5702 20.4608 13.3079 20.2639 13.1145C20.067 12.9211 19.7999 12.8125 19.5214 12.8125ZM19.5214 8.6875H14.1214C13.8429 8.6875 13.5759 8.79615 13.3789 8.98955C13.182 9.18294 13.0714 9.44525 13.0714 9.71875C13.0714 9.99225 13.182 10.2546 13.3789 10.448C13.5759 10.6414 13.8429 10.75 14.1214 10.75H19.5214C19.7999 10.75 20.067 10.6414 20.2639 10.448C20.4608 10.2546 20.5714 9.99225 20.5714 9.71875C20.5714 9.44525 20.4608 9.18294 20.2639 8.98955C20.067 8.79615 19.7999 8.6875 19.5214 8.6875Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/sync.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21.6616 10.374C21.6436 10.418 21.6356 10.467 21.6116 10.507C21.5736 10.57 21.5206 10.62 21.4716 10.674C21.4426 10.704 21.4216 10.741 21.3896 10.768C21.3296 10.817 21.2596 10.85 21.1906 10.884C21.1576 10.9 21.1286 10.926 21.0936 10.938C20.9856 10.978 20.8706 11 20.7516 11C20.6976 11 20.6416 10.996 20.5866 10.986L16.3366 10.281C15.7916 10.191 15.4236 9.676 15.5136 9.131C15.6036 8.587 16.1176 8.214 16.6636 8.309L18.3076 8.581C17.0626 6.395 14.6856 5 12.0696 5C9.11062 5 6.50362 6.718 5.42662 9.375C5.26962 9.765 4.89462 10 4.49962 10C4.37462 10 4.24762 9.977 4.12462 9.927C3.61262 9.72 3.36562 9.137 3.57362 8.625C4.95762 5.208 8.29262 3 12.0696 3C15.4816 3 18.5826 4.87 20.1476 7.788L20.5166 5.815C20.6186 5.273 21.1426 4.914 21.6836 5.018C22.2266 5.119 22.5846 5.642 22.4826 6.185L21.7336 10.185C21.7206 10.254 21.6876 10.312 21.6616 10.374ZM19.8755 14.0732C20.3875 14.2802 20.6345 14.8632 20.4265 15.3752C19.0425 18.7922 15.7075 21.0002 11.9305 21.0002C8.51852 21.0002 5.41752 19.1302 3.85252 16.2122L3.48252 18.1842C3.39352 18.6652 2.97352 19.0002 2.50052 19.0002C2.43952 19.0002 2.37752 18.9942 2.31552 18.9822C1.77252 18.8812 1.41552 18.3582 1.51752 17.8152L2.26652 13.8152C2.27852 13.7532 2.31352 13.7022 2.33552 13.6442C2.36052 13.5812 2.37552 13.5112 2.41252 13.4552C2.43652 13.4182 2.47252 13.3932 2.50152 13.3602C2.55852 13.2942 2.61152 13.2252 2.68252 13.1772C2.69352 13.1692 2.70852 13.1672 2.71952 13.1602C2.81652 13.0972 2.92052 13.0482 3.03552 13.0232C3.04852 13.0202 3.06252 13.0242 3.07552 13.0222C3.18552 13.0042 3.29652 12.9932 3.41352 13.0132L7.66352 13.7192C8.20852 13.8082 8.57652 14.3242 8.48652 14.8692C8.40552 15.3582 7.98152 15.7052 7.50052 15.7052C7.44652 15.7052 7.39152 15.7012 7.33652 15.6912L5.69252 15.4192C6.93752 17.6052 9.31452 19.0002 11.9305 19.0002C14.8895 19.0002 17.4965 17.2822 18.5735 14.6252C18.7805 14.1122 19.3645 13.8662 19.8755 14.0732Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/tasks.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.70697 11.293L11.951 13.537L18.248 6.341C18.612 5.928 19.243 5.884 19.659 6.248C20.074 6.611 20.116 7.243 19.752 7.659L12.752 15.659C12.57 15.867 12.31 15.99 12.033 16C12.022 16 12.011 16 12 16C11.735 16 11.481 15.895 11.293 15.707L8.29297 12.707C7.90197 12.316 7.90197 11.684 8.29297 11.293C8.68397 10.902 9.31597 10.902 9.70697 11.293ZM21 10.9741C21.551 10.9741 21.999 11.4201 22 11.9711C22.008 14.6421 20.975 17.1571 19.091 19.0511C17.208 20.9451 14.7 21.9921 12.029 22.0001H12C9.33897 22.0001 6.83597 20.9681 4.94897 19.0911C3.05497 17.2081 2.00797 14.7001 1.99992 12.0291C1.99197 9.3571 3.02497 6.8431 4.90897 4.9491C6.79197 3.0551 9.29997 2.0081 11.971 2.0001C12.766 2.0121 13.576 2.0921 14.352 2.2781C14.888 2.4081 15.219 2.9481 15.089 3.4851C14.96 4.0211 14.417 4.3511 13.883 4.2231C13.262 4.0731 12.603 4.0101 11.977 4.0001C9.83997 4.0061 7.83297 4.8441 6.32697 6.3591C4.81997 7.8741 3.99397 9.8861 3.99997 12.0231C4.00597 14.1601 4.84397 16.1661 6.35897 17.6731C7.86897 19.1741 9.87097 20.0001 12 20.0001H12.023C14.16 19.9941 16.167 19.1561 17.673 17.6411C19.18 16.1251 20.006 14.1141 20 11.9771C19.999 11.4251 20.445 10.9751 20.997 10.9741H21Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/text-circled.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    height="16"
+    width="16"
+  >
+    <path
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15ZM4.75 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H4.75C4.33579 5.5 4 5.16421 4 4.75C4 4.33579 4.33579 4 4.75 4ZM4.75 7H11.25C11.6642 7 12 7.33579 12 7.75C12 8.16421 11.6642 8.5 11.25 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75C4 7.33579 4.33579 7 4.75 7ZM4.75 10H8.25C8.66421 10 9 10.3358 9 10.75C9 11.1642 8.66421 11.5 8.25 11.5H4.75C4.33579 11.5 4 11.1642 4 10.75C4 10.3358 4.33579 10 4.75 10Z"
+    />
+  </svg>
+</template>

package/src/assets/icons/text-filled.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    height="16"
+    width="16"
+  >
+    <path
+      d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H11.25C11.6642 5.5 12 5.16421 12 4.75C12 4.33579 11.6642 4 11.25 4H4.75ZM4.75 7C4.33579 7 4 7.33579 4 7.75C4 8.16421 4.33579 8.5 4.75 8.5H11.25C11.6642 8.5 12 8.16421 12 7.75C12 7.33579 11.6642 7 11.25 7H4.75ZM4.75 10C4.33579 10 4 10.3358 4 10.75C4 11.1642 4.33579 11.5 4.75 11.5H8.25C8.66421 11.5 9 11.1642 9 10.75C9 10.3358 8.66421 10 8.25 10H4.75Z"
+    />
+  </svg>
+</template>

package/src/assets/icons/text.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.125 7H16.875C17.4963 7 18 7.4701 18 8.05C18 8.6299 17.4963 9.1 16.875 9.1H7.125C6.50368 9.1 6 8.6299 6 8.05C6 7.4701 6.50368 7 7.125 7ZM7.125 11.2H16.875C17.4963 11.2 18 11.6701 18 12.25C18 12.8299 17.4963 13.3 16.875 13.3H7.125C6.50368 13.3 6 12.8299 6 12.25C6 11.6701 6.50368 11.2 7.125 11.2ZM7.125 15.4H12.375C12.9963 15.4 13.5 15.8701 13.5 16.45C13.5 17.0299 12.9963 17.5 12.375 17.5H7.125C6.50368 17.5 6 17.0299 6 16.45C6 15.8701 6.50368 15.4 7.125 15.4Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/thumbs-down.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M11.3804 18.97C11.2334 19.017 11.0754 19.008 10.9344 18.946C10.7934 18.884 10.6804 18.772 10.6164 18.633C10.5514 18.493 10.5404 18.334 10.5854 18.186L11.6074 14.778C11.6784 14.539 11.6934 14.287 11.6504 14.042C11.6074 13.796 11.5074 13.564 11.3584 13.364C11.2094 13.164 11.0164 13.002 10.7944 12.89C10.5714 12.778 10.3254 12.719 10.0764 12.719H5.49938C5.34538 12.719 5.19438 12.683 5.05638 12.615C4.91838 12.547 4.79838 12.448 4.70538 12.326C4.61138 12.204 4.54838 12.062 4.51838 11.911C4.48938 11.76 4.49438 11.604 4.53538 11.456L6.44538 4.45601C6.50238 4.24401 6.62838 4.05801 6.80238 3.92501C6.97638 3.79201 7.19038 3.71901 7.41038 3.71901H15.8814L15.8814 12.941C15.7634 12.989 15.6474 13.045 15.5354 13.108C15.0844 13.364 14.7074 13.731 14.4404 14.176L11.7304 18.693C11.6514 18.825 11.5264 18.924 11.3804 18.97ZM17.8814 12.719H19.3814L19.3814 3.71901H17.8814L17.8814 12.719ZM10.1264 20.775C10.7134 21.035 11.3744 21.071 11.9854 20.876C11.9854 20.876 12.5584 20.58 12.7744 20.408C13.0184 20.216 13.4464 19.721 13.4464 19.721L16.1554 15.204C16.2444 15.056 16.3704 14.934 16.5204 14.849C16.6714 14.764 16.8404 14.719 17.0134 14.719H19.7814C20.2054 14.719 20.6124 14.55 20.9124 14.25C21.2124 13.95 21.3814 13.543 21.3814 13.119L21.3814 3.31901C21.3814 2.89501 21.2124 2.48801 20.9124 2.18801C20.6124 1.88801 20.2054 1.71901 19.7814 1.71901H7.40838C6.75138 1.71901 6.11138 1.93601 5.58738 2.33601C5.06538 2.73501 4.68838 3.29501 4.51538 3.93001L2.60538 10.93C2.48438 11.375 2.46738 11.842 2.55538 12.294C2.64438 12.747 2.83538 13.173 3.11538 13.54C3.39538 13.906 3.75638 14.203 4.16938 14.408C4.58338 14.612 5.03838 14.719 5.49938 14.719H9.53738L8.66938 17.611C8.48538 18.225 8.53138 18.886 8.79938 19.469C9.06738 20.051 9.53938 20.516 10.1264 20.775Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/thumbs-up-double.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9.50184 1.05273L8.79251 2.23606C8.78318 2.21273 8.77318 2.1894 8.76251 2.16673C8.58384 1.77873 8.26918 1.46873 7.87784 1.29606C7.48651 1.12273 7.04584 1.09873 6.63851 1.22873C6.63851 1.22873 6.25651 1.42606 6.11251 1.54073C5.94984 1.66873 5.66451 1.99873 5.66451 1.99873L3.85785 5.01006C3.79851 5.10873 3.71518 5.19006 3.61518 5.24673C3.51451 5.3034 3.40118 5.3334 3.28651 5.3334H1.44118C1.15784 5.3334 0.886512 5.44606 0.686512 5.64606C0.486512 5.84606 0.374512 6.1174 0.374512 6.40006V12.9334C0.374512 13.2161 0.486512 13.4874 0.686512 13.6874C0.886512 13.8874 1.15784 14.0001 1.44118 14.0001H9.68984C10.1278 14.0001 10.5545 13.8554 10.9032 13.5887C11.2518 13.3227 11.5032 12.9494 11.6185 12.5261L12.0018 11.1207H12.8785C13.2465 11.1201 13.6045 10.9994 13.8972 10.7754C14.1892 10.5521 14.3998 10.2387 14.4965 9.88406L15.5652 5.9694C15.6325 5.72073 15.6425 5.4594 15.5925 5.20606C15.5432 4.95273 15.4358 4.71473 15.2798 4.5094C15.1232 4.30473 14.9212 4.13873 14.6905 4.02406C14.4592 3.91006 14.2045 3.85006 13.9465 3.85006H11.6885L12.1732 2.23273C12.2765 1.8894 12.2512 1.52006 12.1012 1.19406C11.9512 0.868065 11.6872 0.608065 11.3592 0.463398C11.0305 0.318064 10.6612 0.298065 10.3192 0.406731C10.3192 0.406731 9.99851 0.572731 9.87784 0.668731C9.74184 0.776065 9.50184 1.05273 9.50184 1.05273ZM5.06451 5.59049V5.59073L5.00118 5.6954C4.82384 5.99206 4.57251 6.23673 4.27184 6.4074C4.19718 6.4494 4.11984 6.48673 4.04118 6.51873V12.6667H9.68851C9.83518 12.6667 9.97784 12.6181 10.0938 12.5294C10.2098 12.4407 10.2932 12.3167 10.3318 12.1754L10.6198 11.1207H12.0018L12.3072 10.0021H12.8778C13.0005 10.0021 13.1205 9.9614 13.2178 9.8874C13.3152 9.81273 13.3852 9.70807 13.4178 9.59007L14.4858 5.6754C14.5085 5.59206 14.5118 5.5054 14.4952 5.42073C14.4785 5.33606 14.4425 5.25673 14.3905 5.18873C14.3385 5.12006 14.2712 5.06473 14.1945 5.02673C14.1172 4.98873 14.0325 4.96873 13.9465 4.96873H11.3865C11.2472 4.96873 11.1098 4.93606 10.9852 4.8734C10.8612 4.81073 10.7525 4.7194 10.6698 4.60806C10.5865 4.49606 10.5305 4.36606 10.5065 4.2294C10.4825 4.09206 10.4905 3.95073 10.5305 3.8174L11.1018 1.9114C11.1272 1.82873 11.1212 1.7394 11.0852 1.6614C11.0492 1.5834 10.9858 1.52073 10.9072 1.48606C10.8285 1.4514 10.7398 1.44673 10.6578 1.47273C10.5758 1.49873 10.5058 1.55406 10.4618 1.6274L8.94584 4.15406C8.82451 4.35606 8.66318 4.5294 8.47118 4.66406L8.27051 5.3334H10.9625C11.2698 5.3334 11.5732 5.40473 11.8492 5.54073C12.1245 5.6774 12.3652 5.8754 12.5518 6.1194C12.7378 6.36406 12.8658 6.64806 12.9252 6.95006C12.9838 7.2514 12.9725 7.56273 12.8918 7.8594L12.3072 10.0021H12.307L12.0017 11.1207H10.6197L10.925 10.0021H10.9252L11.6052 7.50873C11.6318 7.41006 11.6358 7.30606 11.6165 7.2054C11.5965 7.10473 11.5538 7.01006 11.4918 6.92873C11.4298 6.8474 11.3498 6.7814 11.2578 6.73606C11.1658 6.69073 11.0645 6.66673 10.9625 6.66673H7.91051C7.74451 6.66673 7.58118 6.6274 7.43251 6.55273C7.28451 6.47806 7.15518 6.37006 7.05651 6.23673C7.05399 6.23322 7.05146 6.22975 7.04895 6.22629C7.03952 6.2133 7.03027 6.20056 7.02184 6.1874V4.96873H7.02171V6.18739C6.94171 6.06539 6.88704 5.92872 6.86171 5.78472C6.83304 5.62139 6.84304 5.45339 6.89037 5.29406L6.98771 4.96872H6.98785L7.57184 3.02206C7.60118 2.9234 7.59384 2.8174 7.55118 2.72406C7.50851 2.6314 7.43318 2.55673 7.33918 2.5154C7.24518 2.47406 7.13984 2.46806 7.04184 2.4994C6.94384 2.53006 6.86118 2.59606 6.80851 2.68406L6.10851 3.85006H6.10837L5.06451 5.59049ZM1.70784 6.66673H2.70784V12.6667H1.70784V6.66673Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/thumbs-up.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M8.33384 2.49932C8.43184 2.46799 8.53717 2.47399 8.63117 2.51532C8.72517 2.55666 8.8005 2.63132 8.84317 2.72399C8.8865 2.81732 8.89384 2.92332 8.86384 3.02199L8.1825 5.29399C8.13517 5.45332 8.12517 5.62132 8.15384 5.78466C8.1825 5.94866 8.24917 6.10332 8.3485 6.23666C8.44784 6.36999 8.5765 6.47799 8.7245 6.55266C8.87317 6.62732 9.03717 6.66666 9.20317 6.66666H12.2545C12.3572 6.66666 12.4578 6.69066 12.5498 6.73599C12.6418 6.78132 12.7218 6.84732 12.7838 6.92866C12.8465 7.00999 12.8885 7.10466 12.9085 7.20532C12.9278 7.30599 12.9245 7.40999 12.8972 7.50866L11.6238 12.1753C11.5858 12.3167 11.5018 12.4407 11.3858 12.5293C11.2698 12.618 11.1272 12.6667 10.9805 12.6667H5.33317V6.51866C5.41184 6.48666 5.48917 6.44932 5.56384 6.40732C5.8645 6.23666 6.11584 5.99199 6.29384 5.69532L8.1005 2.68399C8.15317 2.59599 8.2365 2.52999 8.33384 2.49932ZM3.99984 6.66666H2.99984V12.6667H3.99984V6.66666ZM9.16984 1.29599C8.7785 1.12266 8.33784 1.09866 7.9305 1.22866C7.9305 1.22866 7.5485 1.42599 7.4045 1.54066C7.24184 1.66866 6.9565 1.99866 6.9565 1.99866L5.1505 5.00999C5.09117 5.10866 5.00717 5.18999 4.90717 5.24666C4.8065 5.30332 4.69384 5.33332 4.5785 5.33332H2.73317C2.4505 5.33332 2.17917 5.44599 1.97917 5.64599C1.77917 5.84599 1.6665 6.11732 1.6665 6.39999V12.9333C1.6665 13.216 1.77917 13.4873 1.97917 13.6873C2.17917 13.8873 2.4505 14 2.73317 14H10.9818C11.4198 14 11.8465 13.8553 12.1958 13.5887C12.5438 13.3227 12.7952 12.9493 12.9105 12.526L14.1838 7.85932C14.2645 7.56266 14.2758 7.25132 14.2172 6.94999C14.1578 6.64799 14.0305 6.36399 13.8438 6.11932C13.6572 5.87532 13.4165 5.67732 13.1412 5.54066C12.8652 5.40466 12.5618 5.33332 12.2545 5.33332H9.5625L10.1412 3.40532C10.2638 2.99599 10.2332 2.55532 10.0545 2.16666C9.87584 1.77866 9.56117 1.46866 9.16984 1.29599Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/topic.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 3H19C19.7956 3 20.5587 3.31607 21.1213 3.87868C21.6839 4.44129 22 5.20435 22 6V16C22 16.7956 21.6839 17.5587 21.1213 18.1213C20.5587 18.6839 19.7956 19 19 19H8.55C8.35699 18.9926 8.16597 19.0412 8 19.14L3.51 21.86C3.35564 21.9516 3.17948 21.9999 3 22C2.82821 21.9995 2.65946 21.9547 2.51 21.87C2.35553 21.7832 2.22691 21.6569 2.1373 21.504C2.04769 21.3511 2.00031 21.1772 2 21V6C2 5.20435 2.31607 4.44129 2.87868 3.87868C3.44129 3.31607 4.20435 3 5 3ZM19.7071 16.7071C19.8946 16.5196 20 16.2652 20 16V6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5H5C4.73478 5 4.48043 5.10536 4.29289 5.29289C4.10536 5.48043 4 5.73478 4 6V19.23L7 17.43C7.46789 17.1482 8.00382 16.9996 8.55 17H19C19.2652 17 19.5196 16.8946 19.7071 16.7071ZM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12ZM13 11C13 11.5523 12.5523 12 12 12C11.4477 12 11 11.5523 11 11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11ZM17 11C17 11.5523 16.5523 12 16 12C15.4477 12 15 11.5523 15 11C15 10.4477 15.4477 10 16 10C16.5523 10 17 10.4477 17 11Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/union.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M4.18 9.99998H3C2.73478 9.99998 2.48043 9.89462 2.29289 9.70708C2.10536 9.51955 2 9.26519 2 8.99998C2 8.73476 2.10536 8.48041 2.29289 8.29287C2.48043 8.10533 2.73478 7.99998 3 7.99998H4.18C4.3902 7.42082 4.77363 6.92044 5.27817 6.56682C5.7827 6.2132 6.38388 6.0235 7 6.0235C7.61612 6.0235 8.2173 6.2132 8.72184 6.56682C9.22637 6.92044 9.6098 7.42082 9.82 7.99998H21C21.2652 7.99998 21.5196 8.10533 21.7071 8.29287C21.8946 8.48041 22 8.73476 22 8.99998C22 9.26519 21.8946 9.51955 21.7071 9.70708C21.5196 9.89462 21.2652 9.99998 21 9.99998H9.82C9.6098 10.5791 9.22637 11.0795 8.72184 11.4331C8.2173 11.7868 7.61612 11.9765 7 11.9765C6.38388 11.9765 5.7827 11.7868 5.27817 11.4331C4.77363 11.0795 4.3902 10.5791 4.18 9.99998ZM7.55557 8.16851C7.39112 8.05862 7.19778 7.99998 7 7.99998C6.73478 7.99998 6.48043 8.10533 6.29289 8.29287C6.10536 8.48041 6 8.73476 6 8.99998C6 9.19776 6.05865 9.3911 6.16853 9.55555C6.27841 9.71999 6.43459 9.84817 6.61732 9.92385C6.80004 9.99954 7.00111 10.0193 7.19509 9.98076C7.38907 9.94218 7.56725 9.84693 7.70711 9.70708C7.84696 9.56723 7.9422 9.38905 7.98079 9.19507C8.01937 9.00108 7.99957 8.80002 7.92388 8.61729C7.84819 8.43457 7.72002 8.27839 7.55557 8.16851ZM17.2729 12.553C17.7778 12.1949 18.3811 12.0018 19 12C19.5504 11.9985 20.0905 12.1483 20.5614 12.4332C21.0323 12.7181 21.4157 13.1271 21.6697 13.6153C21.9238 14.1035 22.0386 14.6522 22.0017 15.2013C21.9647 15.7504 21.7775 16.2788 21.4603 16.7286C21.1432 17.1784 20.7085 17.5323 20.2037 17.7516C19.6989 17.9709 19.1435 18.0471 18.5984 17.9718C18.0532 17.8966 17.5392 17.6729 17.1126 17.3251C16.6861 16.9773 16.3635 16.5189 16.18 16H3C2.73478 16 2.48043 15.8947 2.29289 15.7071C2.10536 15.5196 2 15.2652 2 15C2 14.7348 2.10536 14.4804 2.29289 14.2929C2.48043 14.1054 2.73478 14 3 14H16.18C16.3863 13.4165 16.7681 12.911 17.2729 12.553ZM18.4444 15.8315C18.6089 15.9414 18.8022 16 19 16C19.2652 16 19.5196 15.8947 19.7071 15.7071C19.8946 15.5196 20 15.2652 20 15C20 14.8022 19.9414 14.6089 19.8315 14.4444C19.7216 14.28 19.5654 14.1518 19.3827 14.0761C19.2 14.0004 18.9989 13.9806 18.8049 14.0192C18.6109 14.0578 18.4327 14.1531 18.2929 14.2929C18.153 14.4328 18.0578 14.6109 18.0192 14.8049C17.9806 14.9989 18.0004 15.2 18.0761 15.3827C18.1518 15.5654 18.28 15.7216 18.4444 15.8315Z"
+    />
+  </svg>
+</template>

package/src/assets/icons/upload.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.9972 11.9241C12.999 11.9492 13 11.9745 13 12V20C13 20.552 12.553 21 12 21C11.447 21 11 20.552 11 20V12.0002L8.6 13.8C8.42 13.935 8.21 14 8.001 14C7.696 14 7.397 13.862 7.2 13.6C6.868 13.158 6.958 12.531 7.4 12.2L11.4 9.2C11.746 8.94 12.222 8.933 12.575 9.182L16.575 11.996C17.027 12.314 17.136 12.938 16.818 13.389C16.5 13.84 15.877 13.95 15.425 13.632L12.9972 11.9241ZM4.29375 4.29375C4.475 4.1125 4.725 4 5 4H19C19.275 4 19.525 4.1125 19.7062 4.29375C19.8875 4.475 20 4.725 20 5V7C20 7.55 19.55 8 19 8C18.45 8 18 7.55 18 7V6H6V7C6 7.55 5.55 8 5 8C4.45 8 4 7.55 4 7V5C4 4.725 4.1125 4.475 4.29375 4.29375Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/video overlay.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4 5H20V19H4V5ZM2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V19C22 20.1046 21.1046 21 20 21H4C2.89543 21 2 20.1046 2 19V5ZM11 11C10.4477 11 10 11.4477 10 12V16C10 16.5523 10.4477 17 11 17H17C17.5523 17 18 16.5523 18 16V12C18 11.4477 17.5523 11 17 11H11Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/video-circled.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    height="16"
+    width="16"
+  >
+    <path
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15ZM6.7 11.8672C6.268 11.6632 6 11.2585 6 10.8099V5.19252C6 4.74385 6.268 4.33918 6.7 4.13518C7.188 3.90518 7.76667 3.97252 8.17267 4.30785L11.572 7.11718C11.8447 7.34118 12 7.66385 12 8.00118C12 8.33852 11.8447 8.66118 11.572 8.88518L8.17267 11.6939C7.92733 11.8972 7.618 12.0019 7.304 12.0019C7.09933 12.0019 6.89267 11.9579 6.7 11.8672Z"
+    />
+  </svg>
+</template>

package/src/assets/icons/video-filled.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    height="16"
+    width="16"
+  >
+    <path
+      d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM7.304 12.0019C7.618 12.0019 7.92733 11.8972 8.17267 11.6939L11.572 8.88518C11.8447 8.66118 12 8.33852 12 8.00118C12 7.66385 11.8447 7.34118 11.572 7.11718L8.17267 4.30785C7.76667 3.97252 7.188 3.90518 6.7 4.13518C6.268 4.33918 6 4.74385 6 5.19252V10.8099C6 11.2585 6.268 11.6632 6.7 11.8672C6.89267 11.9579 7.09933 12.0019 7.304 12.0019Z"
+    />
+  </svg>
+</template>

package/src/assets/icons/video-rounded.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/video.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 7.15C20.6962 7.0132 20.3588 6.9687 20.0299 7.02204C19.701 7.07537 19.395 7.22419 19.15 7.45L17 9.45V8C17 7.20435 16.6839 6.44129 16.1213 5.87868C15.5587 5.31607 14.7956 5 14 5H5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H14C14.7956 19 15.5587 18.6839 16.1213 18.1213C16.6839 17.5587 17 16.7956 17 16V14.55L19.16 16.55C19.478 16.8378 19.8911 16.9981 20.32 17C20.558 16.9994 20.7932 16.9483 21.01 16.85C21.3049 16.7307 21.5576 16.5262 21.7357 16.2625C21.9139 15.9989 22.0094 15.6882 22.01 15.37V8.63C22.0086 8.31069 21.9116 7.99911 21.7316 7.73536C21.5516 7.47161 21.2968 7.26774 21 7.15V7.15ZM15 16C15 16.2652 14.8946 16.5196 14.7071 16.7071C14.5196 16.8946 14.2652 17 14 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16V8C4 7.73478 4.10536 7.48043 4.29289 7.29289C4.48043 7.10536 4.73478 7 5 7H14C14.2652 7 14.5196 7.10536 14.7071 7.29289C14.8946 7.48043 15 7.73478 15 8V16ZM20 14.6L17.19 12L20 9.4V14.6Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/view-off.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.71 3.29C4.61676 3.19676 4.50607 3.1228 4.38425 3.07234C4.26243 3.02188 4.13186 2.99591 4 2.99591C3.86814 2.99591 3.73758 3.02188 3.61575 3.07234C3.49393 3.1228 3.38324 3.19676 3.29 3.29C3.1017 3.47831 2.99591 3.7337 2.99591 4C2.99591 4.2663 3.1017 4.5217 3.29 4.71L8.92 10.34C8.56381 11.0026 8.43059 11.7624 8.54009 12.5067C8.64959 13.2509 8.99599 13.9401 9.52794 14.4721C10.0599 15.004 10.7491 15.3504 11.4934 15.4599C12.2376 15.5694 12.9974 15.4362 13.66 15.08L19.29 20.71C19.383 20.8037 19.4936 20.8781 19.6154 20.9289C19.7373 20.9797 19.868 21.0058 20 21.0058C20.132 21.0058 20.2627 20.9797 20.3846 20.9289C20.5064 20.8781 20.617 20.8037 20.71 20.71C20.8037 20.617 20.8781 20.5064 20.9289 20.3846C20.9797 20.2627 21.0058 20.132 21.0058 20C21.0058 19.868 20.9797 19.7373 20.9289 19.6154C20.8781 19.4936 20.8037 19.383 20.71 19.29L4.71 3.29ZM12 13.5C11.6022 13.5 11.2206 13.342 10.9393 13.0607C10.658 12.7794 10.5 12.3978 10.5 12V11.93L12.06 13.49L12 13.5ZM12.22 17C7.92001 17.1 5.10001 13.41 4.22001 12C4.84648 11.0007 5.59937 10.0865 6.46001 9.27999L5.00001 7.87C3.87133 8.93347 2.90442 10.1564 2.13001 11.5C2.04224 11.652 1.99603 11.8245 1.99603 12C1.99603 12.1755 2.04224 12.348 2.13001 12.5C2.76001 13.59 6.13001 19 12.02 19H12.27C13.3776 18.9671 14.4708 18.7404 15.5 18.33L13.92 16.75C13.3644 16.8962 12.7942 16.98 12.22 17ZM11.73 4.99999C17.7 4.81999 21.23 10.39 21.87 11.5C21.9639 11.6485 22.0171 11.8191 22.0241 11.9946C22.0311 12.1702 21.9918 12.3445 21.91 12.5C21.1234 13.8462 20.1428 15.0693 19 16.13L17.49 14.72C18.3682 13.9167 19.1381 13.0023 19.78 12C18.89 10.59 16.07 6.88999 11.78 6.99999C11.2058 7.01997 10.6356 7.10382 10.08 7.24999L8.5 5.66999C9.52924 5.25961 10.6225 5.03285 11.73 4.99999Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/view.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.73 4.99999C17.71 4.81999 21.23 10.39 21.87 11.5C21.9578 11.652 22.004 11.8245 22.004 12C22.004 12.1755 21.9578 12.348 21.87 12.5C21.01 14 17.8 18.86 12.27 19H12.02C6.13001 19 2.76001 13.59 2.13001 12.5C2.04224 12.348 1.99603 12.1755 1.99603 12C1.99603 11.8245 2.04224 11.652 2.13001 11.5C3.00001 9.99999 6.20001 5.13999 11.73 4.99999ZM4.22001 12C5.10001 13.41 7.91001 17.1 12.22 17C16.22 16.9 18.8 13.61 19.83 12C18.94 10.59 16.12 6.88999 11.83 6.99999C7.83001 7.09999 5.22001 10.39 4.22001 12ZM10.0555 9.08985C10.6311 8.70527 11.3078 8.49999 12 8.49999C12.9283 8.49999 13.8185 8.86874 14.4749 9.52512C15.1313 10.1815 15.5 11.0717 15.5 12C15.5 12.6922 15.2947 13.3689 14.9101 13.9445C14.5256 14.5201 13.9789 14.9687 13.3394 15.2336C12.6999 15.4985 11.9961 15.5678 11.3172 15.4327C10.6383 15.2977 10.0146 14.9644 9.52513 14.4749C9.03564 13.9854 8.7023 13.3617 8.56725 12.6828C8.4322 12.0039 8.50152 11.3001 8.76642 10.6606C9.03133 10.0211 9.47993 9.47443 10.0555 9.08985ZM11.1666 13.2472C11.4133 13.412 11.7033 13.5 12 13.5C12.3978 13.5 12.7794 13.342 13.0607 13.0607C13.342 12.7794 13.5 12.3978 13.5 12C13.5 11.7033 13.412 11.4133 13.2472 11.1666C13.0824 10.92 12.8481 10.7277 12.574 10.6142C12.2999 10.5006 11.9983 10.4709 11.7074 10.5288C11.4164 10.5867 11.1491 10.7296 10.9393 10.9393C10.7296 11.1491 10.5867 11.4164 10.5288 11.7074C10.4709 11.9983 10.5007 12.2999 10.6142 12.574C10.7277 12.8481 10.92 13.0824 11.1666 13.2472Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/volume-up.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.97 2.98602C15.1455 2.98602 15.318 3.03223 15.47 3.12C15.6297 3.20502 15.7633 3.33177 15.8566 3.48674C15.95 3.64171 15.9995 3.81909 16 4V20C16 20.2652 15.8946 20.5196 15.7071 20.7071C15.5196 20.8946 15.2652 21 15 21C14.7909 21.0028 14.5856 20.9436 14.41 20.83L8 16.43H3C2.73478 16.43 2.48043 16.3246 2.29289 16.1371C2.10536 15.9496 2 15.6952 2 15.43V8.57C2 8.30478 2.10536 8.05043 2.29289 7.86289C2.48043 7.67535 2.73478 7.57 3 7.57H8L14.47 3.12C14.622 3.03223 14.7945 2.98602 14.97 2.98602ZM8.9 14.6L14 18.1V5.9L8.9 9.4C8.73164 9.51317 8.53285 9.57246 8.33 9.57H4V14.43H8.33C8.53285 14.4275 8.73164 14.4868 8.9 14.6ZM19.1061 8.00298C19.3705 8.03111 19.6129 8.16313 19.78 8.37C20.5732 9.41392 21.0026 10.6889 21.0026 12C21.0026 13.3111 20.5732 14.5861 19.78 15.63C19.6859 15.746 19.567 15.8395 19.432 15.9035C19.297 15.9675 19.1494 16.0005 19 16C18.8108 16.0006 18.6252 15.9476 18.4649 15.847C18.3047 15.7464 18.1762 15.6024 18.0945 15.4317C18.0129 15.261 17.9813 15.0706 18.0035 14.8827C18.0257 14.6947 18.1008 14.517 18.22 14.37C18.7252 13.6831 18.9977 12.8527 18.9977 12C18.9977 11.1473 18.7252 10.3169 18.22 9.63C18.0529 9.42313 17.9748 9.15836 18.003 8.89393C18.0311 8.62951 18.1631 8.38708 18.37 8.22C18.5769 8.05291 18.8416 7.97485 19.1061 8.00298Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="mb-px w-full bg-white pb-3 pl-3 pr-4 pt-2 md:pt-3"
+    :class="classObject"
+    data-testid="rootDiv"
+  >
+    <div
+      class="flex"
+      :class="{
+        'flex-col-reverse': $slots.timePublished,
+        'flex-col': !$slots.timePublished,
+        'px-1': isFulfilled,
+      }"
+    >
+      <!-- Meta description -->
+      <div class="flex items-center justify-between py-1">
+        <div class="flex items-center pr-2">
+          <UiIcon
+            size="small"
+            :name="genreIcon"
+            class="mr-2 shrink-0 fill-current text-gray-700"
+          />
+          <span class="text-xs font-medium text-gray-900">
+            <slot name="description" />
+          </span>
+        </div>
+        <span
+          v-if="$slots.planning"
+          class="w-16 shrink-0 text-right text-xs text-gray-700"
+          ><slot name="planning"
+        /></span>
+      </div>
+
+      <div class="flex flex-col">
+        <!-- Image and headline -->
+        <div v-if="imgSrc || $slots.default" class="flex py-1">
+          <div v-if="imgSrc" class="relative mr-2 flex-none">
+            <img
+              :src="imgSrc"
+              class="h-14 object-cover"
+              :alt="`Thumbnail${imgAlt ? ` :${imgAlt}` : ''}`"
+            />
+            <span
+              v-if="imgCount > 1"
+              class="absolute bottom-1 right-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs font-semibold leading-4 text-white"
+              data-testid="imageCount"
+              >{{ imgCount }}</span
+            >
+          </div>
+          <h3
+            v-if="$slots.default"
+            class="text-sm font-medium leading-5 group-hover:underline"
+            :class="{
+              'ml-6': !isFulfilled,
+              'mr-1': $slots.planning,
+              'pr-16': $slots.planning,
+            }"
+          >
+            <slot />
+          </h3>
+        </div>
+
+        <!-- Text length -->
+        <span
+          v-if="$slots.textLength"
+          class="text-xs text-gray-700"
+          :class="!isFulfilled ? 'ml-6' : ''"
+          ><slot name="textLength"
+        /></span>
+      </div>
+
+      <!-- Time published -->
+      <span
+        v-if="$slots.timePublished"
+        class="pt-1 text-xs font-medium text-gray-700"
+        ><slot name="timePublished"
+      /></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+
+type Genre = "audio" | "video" | "text" | "picture" | "graphic";
+
+const props = withDefaults(
+  defineProps<{
+    genre?: Genre;
+    isFulfilled?: boolean;
+    imgSrc?: string;
+    imgAlt?: string;
+    imgCount?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    genre: "text",
+    isFulfilled: false,
+    imgSrc: "",
+    imgAlt: "",
+    imgCount: 0,
+    disabled: false,
+  },
+);
+
+const genreIcon = computed<UiIconName>(() => {
+  const icons: Record<Genre, UiIconName> = {
+    audio: props.isFulfilled ? "audio-filled" : "audio-circled",
+    video: props.isFulfilled ? "video-filled" : "video-circled",
+    text: props.isFulfilled ? "text-filled" : "text-circled",
+    picture: props.isFulfilled ? "picture-filled" : "picture-circled",
+    graphic: props.isFulfilled ? "graphic-filled" : "graphic-circled",
+  };
+
+  return icons[props.genre];
+});
+
+const classObject = computed(() => {
+  const { isFulfilled } = props;
+  if (!isFulfilled) {
+    return "cursor-auto";
+  }
+  return props.disabled
+    ? "cursor-not-allowed transition shadow border border-gray-300"
+    : "cursor-pointer transition shadow hover:shadow-md group border border-gray-300 hover:border-gray-500";
+});
+</script>

package/src/components/DpaMediaItem/README.md

@@ -0,0 +1,40 @@
+# @dpa-shared-components/dpa-media-item
+
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using DpaMediaItem -->
+<template>
+  <dpa-media-item genre="text" is-fulfilled auto-size style="cursor: pointer;">
+    <template #timePublished>15.11.2021 16:41</template>
+    <tempate #description>News Feature im Basisdienst</tempate>
+    <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
+    <template #textLength>104 dpa-Zeilen / 7176 Zeichen</template>
+  </dpa-media-item>
+</template>
+
+<script setup>
+    import DpaMediaItem from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+| Name          | Type                                                                     | Default  | Description                                                                        |
+|---------------|--------------------------------------------------------------------------|----------|------------------------------------------------------------------------------------|
+| `genre`       | `"audio" &#124; "video" &#124; "text" &#124; "picture" &#124; "graphic"` | `"text"` | Genre variant; either `"text"`, `"picture"` , `"graphic"`, `"video"` or `"audio"`  |
+| `isFulfilled` | `Boolean`                                                                | `false`  | Whether the media item has been fulfilled/delivered (`true`), or planned (`false`) |
+| `imgSrc`      | `String`                                                                 | `""`     | The `src` attribute of the `img` tag used for the thumbnail of pictures            |
+| `imgAlt`      | `String`                                                                 | `""`     | The `alt` attribute of the `img` tag used for the thumbnail of pictures            |
+| `imgCount`    | `Number`                                                                 | `0`      | The number of pictures published in this media coverage item                       |
+| `disabled`    | `Boolean`                                                                | `false`  | Sets the cursor and hover state of the DpaMediaItem                                |
+### Slots
+| Name            | Description                                                                                     |
+|-----------------|-------------------------------------------------------------------------------------------------|
+| `default`       | slot for the media item's headline/title                                                        |
+| `timePublished` | slot for the media item's time of publishing for fulfilled items                                |
+| `description`   | slot for the media item's description placed above the headline                                 |
+| `planning`      | slot for the media item's planning notes (e.g. schedule) placed to the right of the description |
+| `textLength`    | slot for the media item's text length (e.g. schedule) placed below the description/headline     |

package/src/components/UiAutocomplete/README.md

@@ -0,0 +1,44 @@
+# @dpa-shared-components/ui-autocomplete
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiAutocomplete -->
+<template>
+  <UiAutocomplete
+    :value="inputValue"
+    label="Name"
+    placeholder="Example: James"
+    :options="['James Cameron', 'James Bond']"
+    @input="handleEvent"
+    @select="handleEvent"
+  />
+</template>
+
+<script>
+  import UiAutocomplete from "@dpa-id-components/dpa-shared-components";
+  import { ref } from 'vue';
+
+  const inputValue = ref("")
+  const handleEvent = (value) => {
+    inputValue.value = value
+    // do something
+  }
+</script>
+```
+## API
+
+### Props
+| Name          | Type        | Default | Description                             |
+| ------------- | ----------- | ------- |---------------------------------------- |
+| `label`       | `String`    | `""`    | Text for the `input`'s `label`          |
+| `placeholder` | `String`    | `""`    | Text for the `input`'s placeholder      |
+| `value`       | `String`    | `""`    | The `input`'s value                     |
+| `options`     | `String[]`  | `[]`    | An array of possible values             |
+| `readonly`    | `boolean`   | `false` | Sets `readonly` prop of the `UiInput`   |
+
+### Events
+
+| Name     | Type     | Description                                              |
+| -------- |--------- | -------------------------------------------------------- |
+| `select` | `string` | Emitted when an option is selected                       |