@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-illustration/illustrations/no-images.tsx

@@ -0,0 +1,82 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoImagesIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M86.2785 139.123L82.2084 139.695C80.0207 140.002 77.9981 138.478 77.6906 136.291L66.5568 57.0691C66.2493 54.8815 67.7735 52.8588 69.9612 52.5513L148.192 41.5567C150.38 41.2492 152.403 42.7734 152.71 44.961C152.71 44.961 153.422 50.0264 153.667 51.7688"
+			fill="var(--background)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M88.805 134.712L85.1092 135.238C83.1227 135.52 81.2886 134.139 81.0126 132.153L71.0174 60.2279C70.7414 58.2417 72.128 56.4028 74.1145 56.1204L145.152 46.0237C147.138 45.7413 148.973 47.1225 149.249 49.1087L150.108 55.2894C150.154 55.6239 153.223 77.8233 159.313 121.888C159.619 124.1 158.093 126.145 155.905 126.454C155.882 126.457 155.858 126.461 155.835 126.463L88.805 134.712Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M86.2785 139.123L82.2084 139.695C80.0207 140.002 77.9981 138.478 77.6906 136.291L66.5568 57.0691C66.2493 54.8815 67.7735 52.8588 69.9612 52.5513L148.192 41.5567C150.38 41.2492 152.403 42.7734 152.71 44.961C152.71 44.961 153.422 50.0264 153.667 51.7688"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M154.25 56L154.75 60"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M98.5787 63.9781C98.8096 61.7811 100.778 60.1872 102.975 60.4181L181.542 68.6759C183.739 68.9068 185.333 70.875 185.102 73.0721L176.74 152.634C176.509 154.831 174.541 156.425 172.344 156.194L93.7764 147.936C91.5794 147.705 89.9855 145.737 90.2164 143.54L98.5787 63.9781Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M106.693 72.875C106.866 71.2273 108.343 70.0319 109.99 70.2051L172.645 76.7904C174.293 76.9635 175.488 78.4397 175.315 80.0875L169.775 132.797C169.602 134.445 168.126 135.64 166.478 135.467L103.823 128.882C102.175 128.709 100.98 127.232 101.153 125.585L106.693 72.875Z"
+			fill="var(--background)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M109.741 113.498L119.538 106.89C121.172 105.788 123.365 106.04 124.706 107.484L131.879 115.207C132.237 115.592 132.833 115.635 133.242 115.303L148.581 102.874C150.429 101.377 153.167 101.813 154.459 103.81L164.44 119.247L165.873 121.639L165.187 129.764C165.139 130.324 164.639 130.736 164.08 130.674L107.117 124.345C106.575 124.285 106.182 123.802 106.232 123.259L106.987 115.061L109.741 113.498Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M106.693 72.875C106.866 71.2273 108.343 70.0319 109.99 70.2051L172.645 76.7904C174.293 76.9635 175.488 78.4397 175.315 80.0875L169.775 132.797C169.602 134.445 168.126 135.64 166.478 135.467L103.823 128.882C102.175 128.709 100.98 127.232 101.153 125.585L106.693 72.875Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<circle
+			cx="122.032"
+			cy="89.5698"
+			r="6"
+			transform="rotate(6 122.032 89.5698)"
+			fill="var(--color-dap-blue-050)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M107.729 115.045C111.666 112.327 119.538 106.89 119.538 106.89C121.172 105.788 123.365 106.04 124.706 107.484L131.879 115.207C132.238 115.592 132.833 115.635 133.242 115.303L148.582 102.874C150.298 101.483 152.817 101.747 154.208 103.463C154.297 103.574 154.381 103.69 154.459 103.81C154.459 103.81 163.427 118.041 165.523 121.366"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/no-items-cart.tsx

@@ -0,0 +1,86 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoItemsCartIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<path
+			d="M167 148H189.428M64 148H85.4541H64ZM51.1279 148H58H51.1279ZM194.128 148H197H194.128Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M98 43.3027L109.1 55.7559M150.1 43.3027L139 55.7559L150.1 43.3027ZM124 39V55.7559V39Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M92.7976 71H155.404L149.798 79.4098L157.273 85.0164H90.9287L99.3385 79.4098L92.7976 71Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<rect x="89" y="83" width="71" height="75" rx="2" fill="var(--background)" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M93.5852 124.006V89.6453C93.5852 88.2296 94.7454 87.082 96.1767 87.082L157.153 151.164C157.153 153.052 155.642 154.582 153.778 154.582H96.9601C95.0962 154.582 93.5852 153.052 93.5852 151.164V138.395V134.93V124.006ZM93.5852 131.425V127.576V131.425Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M90 124.463V86.8853C90 85.337 91.2705 84.082 92.8377 84.082H157.761C158.782 84.082 159.609 84.9187 159.609 85.9508V154.164C159.609 156.228 157.954 157.902 155.913 157.902H93.6956C91.6546 157.902 90 156.228 90 154.164V140.199V136.41M90 132.576V128.368"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M91.8631 84.082V72.8689C91.8631 71.8367 92.614 71 93.5403 71H155.596C156.522 71 157.273 71.8367 157.273 72.8689V84.082"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M109.15 103.705C110.956 103.705 112.42 102.241 112.42 100.434C112.42 98.6282 110.956 97.1639 109.15 97.1639C107.344 97.1639 105.879 98.6282 105.879 100.434C105.879 102.241 107.344 103.705 109.15 103.705Z"
+			fill="var(--color-dap-blue-075)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M139.986 103.705C141.792 103.705 143.257 102.241 143.257 100.434C143.257 98.6282 141.792 97.1639 139.986 97.1639C138.18 97.1639 136.716 98.6282 136.716 100.434C136.716 102.241 138.18 103.705 139.986 103.705Z"
+			fill="var(--color-dap-blue-075)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M139.519 103.705C139.519 111.962 132.825 118.656 124.568 118.656C116.311 118.656 109.617 111.962 109.617 103.705"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M92.8545 71.9315L99.4329 78.4251C99.8259 78.8131 99.8301 79.4463 99.4421 79.8393C99.3749 79.9073 99.2984 79.9654 99.2148 80.0117L91.863 84.082"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M156.44 71.9992L150.145 78.4197C149.758 78.814 149.765 79.4472 150.159 79.8338C150.225 79.8984 150.299 79.9535 150.38 79.9976L157.867 84.082"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/no-messages.tsx

@@ -0,0 +1,51 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoMessagesIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M168.577 126.075C166 128 163.488 129.81 160.644 131.374L160.809 145.457C160.822 146.562 159.937 147.467 158.832 147.48C158.383 147.486 157.945 147.339 157.589 147.066L144.926 137.323C140.18 138.416 135.173 139 130 139C99.6243 139 75 118.853 75 94C75 69.1472 99.6243 49 130 49C160.376 49 185 69.1472 185 94C185 100.879 183.114 107.397 179.741 113.227C179.119 114.303 178.446 115.355 177.726 116.381C177.726 116.381 176.317 118.5 173.5 121.5C170.683 124.5 168.577 126.075 168.577 126.075Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M162.853 81.5895C168.157 81.5895 173.266 80.957 178.051 79.7868C179.961 84.1364 181 88.8232 181 93.7074C181 100.043 179.251 106.047 176.123 111.417C175.547 112.408 174.923 113.376 174.255 114.322C173.2 115.815 172.448 116.869 171.785 117.714C170.219 119.713 169.155 120.544 165.771 123.25C163.515 125.055 160.637 127.059 158 128.5V140C158.012 141.017 158 142 157.5 142C157 142.5 156.33 141.752 156 141.5L146 133C141.599 134.006 134.797 135.156 130 135.156C101.833 135.156 79 116.599 79 93.7074C79 74.961 94.3133 59.1215 115.328 54C120.832 69.8745 140.023 81.5895 162.853 81.5895ZM110.291 88.1483C106.986 88.1483 104.307 90.8448 104.307 94.1711C104.307 97.4974 106.986 100.194 110.291 100.194C113.596 100.194 116.275 97.4974 116.275 94.1711C116.275 90.8448 113.596 88.1483 110.291 88.1483ZM129.241 88.1483C125.936 88.1483 123.257 90.8448 123.257 94.1711C123.257 97.4974 125.936 100.194 129.241 100.194C132.546 100.194 135.225 97.4974 135.225 94.1711C135.225 90.8448 132.546 88.1483 129.241 88.1483ZM148.191 88.1483C144.886 88.1483 142.207 90.8448 142.207 94.1711C142.207 97.4974 144.886 100.194 148.191 100.194C151.496 100.194 154.176 97.4974 154.176 94.1711C154.176 90.8448 151.496 88.1483 148.191 88.1483Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M110 88C113.314 88 116 90.6863 116 94C116 97.3137 113.314 100 110 100C106.686 100 104 97.3137 104 94C104 90.6863 106.686 88 110 88ZM129 88C132.314 88 135 90.6863 135 94C135 97.3137 132.314 100 129 100C125.686 100 123 97.3137 123 94C123 90.6863 125.686 88 129 88ZM148 88C151.314 88 154 90.6863 154 94C154 97.3137 151.314 100 148 100C144.686 100 142 97.3137 142 94C142 90.6863 144.686 88 148 88Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M89.6619 79.3112C88.7539 80.8431 87.967 82.4329 87.3115 84.0722"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M108.022 63.0732C101.469 66.2006 95.9373 70.6244 91.9395 75.9203"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/no-search-result.tsx

@@ -0,0 +1,76 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoSearchResultIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<path
+			d="M120.5 133C139.002 133 154 118.002 154 99.5C154 80.9985 139.002 66 120.5 66C101.998 66 87 80.9985 87 99.5C87 118.002 101.998 133 120.5 133Z"
+			fill="var(--color-dap-blue-050)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M115.132 125.494C116.891 125.819 118.68 125.987 120.5 126C135.136 126 147 114.136 147 99.5C147 84.8645 135.136 73 120.5 73C116.74 73 113.164 73.7829 109.924 75.1946C104.294 77.6479 99.6816 81.9999 96.896 87.4419C95.0445 91.0589 94 95.1575 94 99.5C94 103.44 94.8599 107.179 96.4021 110.54C97.5032 112.94 98.9521 115.146 100.684 117.096"
+			fill="var(--background)"
+		/>
+		<path
+			d="M115.132 125.494C116.891 125.819 118.68 125.987 120.5 126C135.136 126 147 114.136 147 99.5C147 84.8645 135.136 73 120.5 73C116.74 73 113.164 73.7829 109.924 75.1946C104.294 77.6479 99.6816 81.9999 96.896 87.4419C95.0445 91.0589 94 95.1575 94 99.5C94 103.44 94.8599 107.179 96.4021 110.54C97.5032 112.94 98.9521 115.146 100.684 117.096"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M103.797 120.075C105.945 121.821 108.372 123.237 111.001 124.247"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path d="M148 126L154 132" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M153.03 131.03C151.138 132.923 151.138 135.992 153.03 137.884L164.116 148.97C166.008 150.862 169.077 150.862 170.97 148.97C172.863 147.077 172.863 144.008 170.97 142.116L159.885 131.03C157.992 129.138 154.923 129.138 153.03 131.03Z"
+			fill="var(--color-dap-blue-075)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path d="M158 133L169 144" stroke="var(--background)" strokeWidth="2.5" strokeLinecap="round" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M114 88C114 99.598 123.402 109 135 109C137.278 109 139.472 108.637 141.526 107.966C138.173 116.287 130.023 122.161 120.5 122.161C107.985 122.161 97.8394 112.015 97.8394 99.5C97.8394 88.1596 106.17 78.7648 117.045 77.1011C115.113 80.2793 114 84.0097 114 88Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M121 81C119.727 81 118.482 81.1253 117.279 81.3642M113.645 82.4761C106.804 85.3508 102 92.1144 102 100"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M174.176 99.7773H166M180.5 92H163.324H180.5ZM187.5 92H185.279H187.5Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M84.1758 121.777H76M79.5 113H62.3242H79.5ZM56.5 113H52.2788H56.5Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/no-tasks.tsx

@@ -0,0 +1,61 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoTasksIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M99.942 133.192L101.432 133.141V154.14C101.432 154.615 101.819 155 102.296 155H154.136C154.613 155 155 154.615 155 154.14V82.155C155 80.4126 153.582 79 151.832 79H104.6C102.85 79 101.432 80.4126 101.432 82.155V97.1227L99.942 97.0711C99.767 97.065 99.5917 97.062 99.416 97.062C90.3809 97.062 83 105.124 83 115.132C83 125.139 90.3809 133.202 99.416 133.202C99.5917 133.202 99.767 133.199 99.942 133.192ZM100.107 126.29C99.8778 126.309 99.6473 126.318 99.416 126.318C93.9625 126.318 89.6432 121.263 89.6432 115.132C89.6432 109.001 93.9625 103.946 99.416 103.946C99.6473 103.946 99.8778 103.955 100.107 103.973L101.432 104.079V126.184L100.107 126.29Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M147 109.182V113.925M147 85.1816V103.5"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M67.1279 147H74M181.128 147H184M161 147H176.428M80 147H97.4541"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M128 35C125.333 39.2135 124 42.8802 124 46C124 51.5562 128.654 54.0444 128.654 60.063C128.654 63.1177 127.103 66.1507 124 69.1621"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M116 46C115.128 51.5127 119 52.5322 119 57.4746C119 59.9831 118 62.4915 116 65"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M134.795 43.4741C133.474 46.8933 134.216 48.9774 134.795 50.2041C136.033 52.8262 138 55.0896 138 57.7578C138 60.8568 136.932 63.8392 134.795 66.7051"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M105 84C105 83.4477 105.448 83 106 83L125 83V152H106C105.448 152 105 151.552 105 151V84Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/site.tsx

@@ -0,0 +1,80 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const SiteIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		width="250"
+		height="200"
+		viewBox="0 0 250 200"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
+		<rect x="119" y="60" width="21" height="65" fill="var(--background)" />
+		<rect x="100" y="91" width="9" height="34" fill="var(--background)" />
+		<path d="M71 141H100" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M149 141H178" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M151 120H154" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M151 105H154" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M128 105L134 105" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M116 105L122 105" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M128 90H134" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M116 90H122" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M128 75H134" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M116 75H122" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M128 62H134" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M116 62H122" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M96 120H99" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M96 105H99" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M151 90H154" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M151 75H154" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M105 141L144 141" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M112 145L138 145" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path d="M121 143L128 143" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+		<path
+			d="M96.0498 27.7569L108.406 41.8779M154.05 27.7569L141.693 41.8779L154.05 27.7569ZM124.994 22.8779V41.8779V22.8779Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<rect
+			x="108"
+			y="52"
+			width="35"
+			height="78"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+		<rect
+			x="120"
+			y="115"
+			width="11"
+			height="15"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+		<rect
+			x="143"
+			y="65"
+			width="21"
+			height="65"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+		<rect
+			x="86"
+			y="91"
+			width="22"
+			height="39"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/index.ts

@@ -0,0 +1,3 @@
+export { default as DsIllustration } from './ds-illustration';
+export type { DsIllustrationProps, DsIllustrationVariant } from './ds-illustration.types';
+export { dsIllustrationVariants } from './ds-illustration.types';

package/src/components/ds-main-menu/components/expanded-item/expanded-item.tsx

@@ -0,0 +1,108 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { DsButtonV3 } from '../../../ds-button-v3';
+import { DsIcon } from '../../../ds-icon';
+import { DsTooltip } from '../../../ds-tooltip';
+import { DsTypography } from '../../../ds-typography';
+import { COMING_SOON_TOOLTIP, EXTEND_TOOLTIP } from '../../ds-main-menu.types';
+import styles from '../../ds-main-menu.module.scss';
+import { handleActivatableClick, handleActivatableKeyDown, isNonActivatable } from '../../ds-main-menu.utils';
+import { MenuGraphic } from '../menu-graphic';
+import type { ExpandedItemProps } from './expanded-item.types';
+
+export const ExpandedItem = ({ item, isSelected, onItemSelect, onClose }: ExpandedItemProps) => {
+	const state = item.state ?? 'default';
+	const nonActivatable = isNonActivatable(state);
+	const isDisabled = state === 'disabled';
+	const isComingSoon = state === 'comingSoon';
+
+	const linkClassName = classNames(styles.expandedLink, {
+		[styles.expandedLinkSelected]: isSelected,
+		[styles.expandedLinkDisabled]: isDisabled,
+		[styles.expandedLinkComingSoon]: isComingSoon,
+	});
+
+	const commonProps = {
+		className: linkClassName,
+		'aria-current': isSelected ? ('page' as const) : undefined,
+		'aria-disabled': nonActivatable ? true : undefined,
+		tabIndex: isDisabled ? -1 : undefined,
+		onClick: nonActivatable
+			? (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => event.preventDefault()
+			: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+					handleActivatableClick(event, item.id, item.href, onItemSelect, onClose),
+		onKeyDown: nonActivatable
+			? undefined
+			: (event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+					handleActivatableKeyDown(event, item.id, item.href, onItemSelect, onClose),
+	};
+
+	const content = (
+		<>
+			<span className={styles.expandedIcon} aria-hidden="true">
+				<MenuGraphic icon={item.icon} svgClassName={styles.graphic} size="extra-large" />
+			</span>
+			<span className={styles.expandedText}>
+				<DsTypography variant="heading2" asChild>
+					<span>{item.label}</span>
+				</DsTypography>
+				{item.description && (
+					<DsTypography variant="body-sm-reg" className={styles.expandedDescription}>
+						{item.description}
+					</DsTypography>
+				)}
+			</span>
+		</>
+	);
+
+	const primaryLink = item.href ? (
+		<a href={item.href} {...commonProps}>
+			{content}
+		</a>
+	) : (
+		<button type="button" {...commonProps}>
+			{content}
+		</button>
+	);
+
+	const action = (() => {
+		if (item.statusBadge !== undefined) {
+			return item.statusBadge === null ? null : (
+				<span className={styles.expandedActionBadge}>{item.statusBadge}</span>
+			);
+		}
+
+		if (state === 'extend') {
+			return (
+				<DsTooltip content={EXTEND_TOOLTIP} placement="top">
+					<DsButtonV3
+						icon="open_in_full"
+						variant="secondary"
+						size="small"
+						aria-label={`Open ${item.label}`}
+						onClick={(event) => handleActivatableClick(event, item.id, undefined, onItemSelect, onClose)}
+					/>
+				</DsTooltip>
+			);
+		}
+
+		if (isComingSoon) {
+			return (
+				<DsTooltip content={COMING_SOON_TOOLTIP} placement="top">
+					<span className={styles.expandedActionBadge}>
+						<DsIcon icon="handyman" size="tiny" color="main" />
+					</span>
+				</DsTooltip>
+			);
+		}
+
+		return null;
+	})();
+
+	return (
+		<>
+			{primaryLink}
+			{action !== null && <span className={styles.expandedAction}>{action}</span>}
+		</>
+	);
+};

package/src/components/ds-main-menu/components/expanded-item/expanded-item.types.ts

@@ -0,0 +1,8 @@
+import type { DsMainMenuItem, DsMainMenuProps } from '../../ds-main-menu.types';
+
+export interface ExpandedItemProps {
+	item: DsMainMenuItem;
+	isSelected: boolean;
+	onItemSelect?: DsMainMenuProps['onItemSelect'];
+	onClose: () => void;
+}

package/src/components/ds-main-menu/components/expanded-item/index.ts

@@ -0,0 +1 @@
+export * from './expanded-item';

package/src/components/ds-main-menu/components/menu-graphic/index.ts

@@ -0,0 +1 @@
+export * from './menu-graphic';

package/src/components/ds-main-menu/components/menu-graphic/menu-graphic.tsx

@@ -0,0 +1,16 @@
+import type { FunctionComponent, SVGProps } from 'react';
+import { DsIcon, type IconType } from '../../../ds-icon';
+import type { MenuGraphicProps } from './menu-graphic.types';
+
+const isSvgIcon = (icon: IconType): icon is FunctionComponent<SVGProps<SVGSVGElement>> =>
+	typeof icon === 'function';
+
+export const MenuGraphic = ({ icon, svgClassName, size }: MenuGraphicProps) => {
+	if (isSvgIcon(icon)) {
+		const Svg = icon;
+
+		return <Svg className={svgClassName} />;
+	}
+
+	return <DsIcon icon={icon} size={size} />;
+};

package/src/components/ds-main-menu/components/menu-graphic/menu-graphic.types.ts

@@ -0,0 +1,7 @@
+import type { IconSize, IconType } from '../../../ds-icon';
+
+export interface MenuGraphicProps {
+	icon: IconType;
+	svgClassName: string;
+	size: IconSize;
+}

package/src/components/ds-main-menu/components/tile-link/index.ts

@@ -0,0 +1 @@
+export * from './tile-link';