@drivenets/design-system 0.18.1 → 0.20.0

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

@@ -0,0 +1,107 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const DoneIllustration: 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="M172.5 45V51"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M172.5 59V65"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M162.5 55H168.5"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M176.5 55H182.5"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M89.5 148V152"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M89.5 160V164"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M81.5 156H85.5"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M93.5 156H97.5"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M160.711 131.126C162.102 129.423 163.352 127.642 164.461 125.799C166.901 121.744 168.66 117.388 169.734 112.897C170.821 108.356 171.209 103.676 170.894 99.0296C170.62 94.9756 169.811 90.9475 168.465 87.0598C167.131 83.2028 165.268 79.484 162.875 76.015C161.45 73.9479 159.836 71.9696 158.034 70.1036C155.388 67.364 152.486 65.0219 149.402 63.0787C146.089 60.9908 142.566 59.3634 138.926 58.1984C134.368 56.7393 129.628 56.0054 124.886 56C121.197 55.9959 117.507 56.4328 113.902 57.3125C109.845 58.3028 105.895 59.8543 102.177 61.9692C98.9076 63.8284 95.817 66.123 92.988 68.8547C89.4328 72.2875 86.553 76.1572 84.3512 80.2985C82.1956 84.3531 80.6899 88.6682 79.8366 93.0887C78.9574 97.6429 78.7706 102.309 79.2789 106.918C79.9378 112.891 81.7643 118.768 84.7644 124.179C86.684 127.641 89.0842 130.912 91.9663 133.896C96.5416 138.634 101.883 142.183 107.604 144.535C114.562 147.397 122.081 148.489 129.465 147.8C135.662 147.221 141.765 145.387 147.361 142.29"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M150.701 140.378C153.607 138.508 156.191 136.175 157.872 134.291"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M167 104.617C166.714 104.622 166.427 104.625 166.14 104.625C140.886 104.625 120.209 84.9362 118.476 60C98.3752 63.1706 83 80.6526 83 101.743C83 125.081 101.825 144 125.048 144C147.309 144 165.53 126.615 167 104.617Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M109.023 100.373C107.8 99.2433 105.903 99.33 104.785 100.567C103.668 101.803 103.753 103.721 104.977 104.851L119.096 117.889C120.808 119.47 123.465 119.349 125.029 117.618C125.095 117.544 125.095 117.544 125.158 117.469L145.307 92.9716C146.366 91.6837 146.192 89.7716 144.918 88.7008C143.644 87.63 141.752 87.806 140.693 89.0939L121.75 112.125L109.023 100.373Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M113.824 66.4131C111.874 67.1447 109.969 68.0338 108.128 69.0806C105.269 70.7072 102.565 72.7149 100.09 75.1049C99.0754 76.0846 98.1237 77.105 97.235 78.161M94.4851 81.8378C93.7785 82.9057 93.1281 84.0004 92.5342 85.1176C92.0956 85.9428 91.6877 86.7803 91.3106 87.6285"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);

package/src/components/{ds-catalog-layout/catalog-layout-empty-illustration.tsx → ds-illustration/illustrations/empty-inbox.tsx}

@@ -1,6 +1,7 @@
 import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
 
-export const CatalogLayoutEmptyIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
+export const EmptyInboxIllustration: FC<SVGProps<SVGSVGElement>> = (props) => (
 	<svg
 		width="250"
 		height="200"
@@ -9,46 +10,41 @@ export const CatalogLayoutEmptyIllustration: FC<SVGProps<SVGSVGElement>> = (prop
 		xmlns="http://www.w3.org/2000/svg"
 		{...props}
 	>
-		<rect width="250" height="200" fill="white" />
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z"
-			fill="#F3F5FA"
-		/>
+		<rect width="250" height="200" fill="var(--background)" />
+		<IllustrationClouds />
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M113.119 112.307C113.04 112.86 113 113.425 113 114C113 120.627 118.373 126 125 126C131.627 126 137 120.627 137 114C137 113.425 136.96 112.86 136.881 112.307H166V139C166 140.657 164.657 142 163 142H87C85.3431 142 84 140.657 84 139V112.307H113.119Z"
-			fill="white"
+			fill="var(--background)"
 		/>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M138 112C138 119.18 132.18 125 125 125C117.82 125 112 119.18 112 112C112 111.767 112.006 111.536 112.018 111.307H84L93.5604 83.0389C93.9726 81.8202 95.1159 81 96.4023 81H153.598C154.884 81 156.027 81.8202 156.44 83.0389L166 111.307H137.982C137.994 111.536 138 111.767 138 112Z"
-			fill="white"
+			fill="var(--background)"
 		/>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M136.098 112.955C136.098 118.502 131.129 124 125 124C118.871 124 113.902 118.502 113.902 112.955C113.902 112.775 113.908 111.596 113.918 111.419H93L101.161 91.5755C101.513 90.6338 102.489 90 103.587 90H146.413C147.511 90 148.487 90.6338 148.839 91.5755L157 111.419H136.082C136.092 111.596 136.098 112.775 136.098 112.955Z"
-			fill="#C7D8FF"
+			fill="var(--color-dap-blue-200)"
 		/>
 		<path
 			d="M85.25 111.512V138C85.25 138.966 86.0335 139.75 87 139.75H163C163.966 139.75 164.75 138.966 164.75 138V111.512L155.255 83.4393C155.015 82.7285 154.348 82.25 153.598 82.25H96.4023C95.6519 82.25 94.985 82.7285 94.7446 83.4393L85.25 111.512Z"
-			stroke="#0064FA"
+			stroke="var(--color-dap-blue-700)"
 			strokeWidth="2.5"
 		/>
 		<path
 			d="M98 111C101.937 111 106.185 111 110.745 111C112.621 111 112.621 112.319 112.621 113C112.621 119.627 118.117 125 124.897 125C131.677 125 137.173 119.627 137.173 113C137.173 112.319 137.173 111 139.05 111H164M90.5737 111H93H90.5737Z"
-			stroke="#0064FA"
+			stroke="var(--color-dap-blue-700)"
 			strokeWidth="2.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
 		/>
 		<path
 			d="M150.1 58.3027L139 70.7559M124.1 54V70.7559V54ZM98 58.3027L109.1 70.7559L98 58.3027Z"
-			stroke="#AFBFE4"
+			stroke="var(--color-dap-blue-300)"
 			strokeWidth="2.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"

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

@@ -0,0 +1,86 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const ErrorIllustration: 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="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92ZM103.996 140H97.0314Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M103.996 140H97.0314M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.367 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426ZM127.116 114.758C124.078 114.758 121.614 117.192 121.614 120.195C121.614 123.198 124.078 125.632 127.116 125.632C130.155 125.632 132.618 123.198 132.618 120.195C132.618 117.192 130.155 114.758 127.116 114.758Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M127.5 126C130.538 126 133 123.538 133 120.5C133 117.462 130.538 115 127.5 115C124.462 115 122 117.462 122 120.5C122 123.538 124.462 126 127.5 126Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M112 109L119 103.507L112 98.2776"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M143 109L136 103.507L143 98.2776"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M137 67C143.509 68.7226 148.648 73.8129 150.44 80.2932"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M158 50C159.657 50 161 48.6569 161 47C161 45.3431 159.657 44 158 44C156.343 44 155 45.3431 155 47C155 48.6569 156.343 50 158 50Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2"
+		/>
+		<path
+			d="M189 66C190.657 66 192 64.6569 192 63C192 61.3431 190.657 60 189 60C187.343 60 186 61.3431 186 63C186 64.6569 187.343 66 189 66Z"
+			fill="var(--color-dap-blue-300)"
+		/>
+		<path
+			d="M165.757 57.7573L174.116 66.1156M174.243 57.7573L165.884 66.1156L174.243 57.7573Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M71.4038 75.5962L77.4038 81.5962M77.4038 75.5962L71.4038 81.5962L77.4038 75.5962Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M85 69C86.6569 69 88 67.6569 88 66C88 64.3431 86.6569 63 85 63C83.3431 63 82 64.3431 82 66C82 67.6569 83.3431 69 85 69Z"
+			fill="var(--color-dap-blue-300)"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/go-filter.tsx

@@ -0,0 +1,51 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const GoFilterIllustration: 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 />
+		<g transform="translate(166 42) scale(-1 1)">
+			<path
+				d="M37.1186 40.0113C37.9105 40.8691 39.2656 40.8691 40.0575 40.0113L57.7978 20.7962C58.9806 19.5151 58.072 17.4395 56.3284 17.4395L20.8478 17.4395C19.1042 17.4395 18.1955 19.5151 19.3783 20.7962L37.1186 40.0113Z"
+				fill="var(--background)"
+			/>
+			<path d="M44 25H13" stroke="var(--color-dap-blue-300)" strokeWidth="2.5" strokeLinecap="round" />
+			<path
+				d="M25 9.5C33.5 9.5 64.2 9.5 67 9.5C70.5 9.5 71.5 10.5 71.5 13C71.5 15.5 71.5 18.5 71.5 20.5C71.5 22.1 70.5 23.1667 70 23.5L47.5 46V65L34 72V68"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M19 9.5C10.5 9.5 17.3 9.5 14.5 9.5C11 9.5 10 10.5 10 13C10 15.5 10 18.5 10 20.5C10 22.1 11 23.1667 11.5 23.5L34 46V62.5"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinecap="round"
+			/>
+		</g>
+		<g transform="translate(105 126)">
+			<path
+				d="M19.9974 4.08533C16.0108 9.04533 8.38411 19.6053 8.38411 24.912C8.38411 31.7387 13.5974 37.2987 19.9974 37.2987C26.4108 37.2987 31.6241 31.7387 31.6241 24.912C31.6241 19.6053 23.9974 9.04533 19.9974 4.08533ZM20.1574 33.1653C19.9574 33.6987 19.4508 34.0453 18.9041 34.0453C18.7481 34.0465 18.5936 34.0147 18.4508 33.952C12.4908 31.7787 11.2508 26.872 11.4374 24.592C11.4506 24.4178 11.4979 24.2478 11.5767 24.0919C11.6555 23.936 11.7643 23.7971 11.8967 23.6832C12.0292 23.5693 12.1828 23.4826 12.3488 23.428C12.5148 23.3735 12.6899 23.3522 12.8641 23.3653C13.0383 23.3785 13.2083 23.4258 13.3642 23.5046C13.5201 23.5834 13.659 23.6921 13.7729 23.8246C13.8868 23.9571 13.9735 24.1107 14.0281 24.2767C14.0826 24.4427 14.1039 24.6178 14.0908 24.792C14.0774 25.0053 13.8774 29.4453 19.3708 31.4587C20.0641 31.712 20.4108 32.472 20.1574 33.1653Z"
+				fill="var(--background)"
+			/>
+			<path
+				d="M18.9249 33.2587C18.7435 33.7079 18.284 34 17.7881 34C17.6466 34.001 17.5065 33.9742 17.377 33.9213C11.9712 32.0905 10.8466 27.9572 11.0159 26.0365C11.0278 25.8897 11.0707 25.7466 11.1422 25.6152C11.2136 25.4839 11.3123 25.3669 11.4324 25.2709C11.5526 25.175 11.6919 25.1019 11.8425 25.056C11.993 25.0101 12.1518 24.9921 12.3099 25.0032C12.4679 25.0142 12.622 25.0541 12.7634 25.1205C12.9049 25.1869 13.0308 25.2785 13.1341 25.3901C13.2375 25.5017 13.3161 25.6311 13.3656 25.7709C13.415 25.9107 13.4344 26.0582 13.4224 26.205C13.4103 26.3847 13.2289 30.1249 18.2114 31.821C18.8403 32.0344 19.1547 32.6746 18.9249 33.2587Z"
+				fill="var(--color-dap-blue-200)"
+			/>
+			<path
+				d="M7 24.5C7 16.1 15.3333 6.33333 19.5 2C24 6.83333 32.5 17.8 32.5 25C32.5 34 24.5 38 19.5 38C15 38 7 35 7 24.5Z"
+				stroke="var(--color-dap-blue-200)"
+				strokeWidth="2.5"
+			/>
+		</g>
+	</svg>
+);

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

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+
+export const IllustrationClouds: FC = () => (
+	<path
+		fillRule="evenodd"
+		clipRule="evenodd"
+		d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z"
+		fill="var(--color-dap-gray-100)"
+	/>
+);

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

@@ -0,0 +1,39 @@
+import type { FC, SVGProps } from 'react';
+import type { DsIllustrationVariant } from '../ds-illustration.types';
+import { ConfigurationIllustration } from './configuration';
+import { DeviceIllustration } from './device';
+import { DoneIllustration } from './done';
+import { EmptyInboxIllustration } from './empty-inbox';
+import { ErrorIllustration } from './error';
+import { GoFilterIllustration } from './go-filter';
+import { NoConnectionIllustration } from './no-connection';
+import { NoCreditCardIllustration } from './no-credit-card';
+import { NoDeviceIllustration } from './no-device';
+import { NoDocumentsIllustration } from './no-documents';
+import { NoGpsIllustration } from './no-gps';
+import { NoImagesIllustration } from './no-images';
+import { NoItemsCartIllustration } from './no-items-cart';
+import { NoMessagesIllustration } from './no-messages';
+import { NoSearchResultIllustration } from './no-search-result';
+import { NoTasksIllustration } from './no-tasks';
+import { SiteIllustration } from './site';
+
+export const illustrations: Record<DsIllustrationVariant, FC<SVGProps<SVGSVGElement>>> = Object.freeze({
+	configuration: ConfigurationIllustration,
+	device: DeviceIllustration,
+	done: DoneIllustration,
+	'empty-inbox': EmptyInboxIllustration,
+	error: ErrorIllustration,
+	'go-filter': GoFilterIllustration,
+	'no-connection': NoConnectionIllustration,
+	'no-credit-card': NoCreditCardIllustration,
+	'no-device': NoDeviceIllustration,
+	'no-documents': NoDocumentsIllustration,
+	'no-gps': NoGpsIllustration,
+	'no-images': NoImagesIllustration,
+	'no-items-cart': NoItemsCartIllustration,
+	'no-messages': NoMessagesIllustration,
+	'no-search-result': NoSearchResultIllustration,
+	'no-tasks': NoTasksIllustration,
+	site: SiteIllustration,
+});

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

@@ -0,0 +1,54 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoConnectionIllustration: 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="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508M103.996 140H97.0314Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.367 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M137 69C143.509 70.7226 148.648 75.8129 150.44 82.2932"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M108 101.5C108 105.09 111.134 108 115 108C118.866 108 122 105.09 122 101.5"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M137 101.5C137 105.09 140.134 108 144 108C147.866 108 151 105.09 151 101.5"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path d="M122 120H136.5" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		<path
+			d="M82.5675 77.0957L75.9123 85.2725H82.7277V87H73.3683V85.3682L80.0236 77.3037H73.88V75.5762H82.5675V77.0957ZM69.1564 62.3818L60.004 73.624H69.3761V76H56.506V73.7559L65.6583 62.668H57.2101V60.292H69.1564V62.3818Z"
+			fill="var(--color-dap-blue-300)"
+		/>
+	</svg>
+);

package/src/components/ds-illustration/illustrations/no-credit-card.tsx

@@ -0,0 +1,48 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoCreditCardIllustration: 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="M69.9525 70.5176L152.977 57.2259C154.613 56.964 156.152 58.0779 156.414 59.714C156.414 59.7172 156.415 59.7205 156.415 59.7238L164.537 111.556C164.793 113.189 163.68 114.721 162.048 114.983L79.0227 128.274C77.3867 128.536 75.8481 127.422 75.5862 125.786C75.5857 125.783 75.5851 125.78 75.5846 125.776L67.4629 73.9443C67.207 72.3113 68.3203 70.7789 69.9525 70.5176Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M83.3448 127.423L80.1615 127.948C77.9748 128.308 75.9214 126.756 75.575 124.481L68.0499 75.0391C67.7036 72.7636 69.1955 70.6268 71.3822 70.2664L151.558 57.0519C153.745 56.6916 155.798 58.2441 156.145 60.5196C156.482 62.7367 156.751 64.5036 156.952 65.8203M157.523 69.5758C157.705 70.7685 157.864 71.8129 158 72.7091"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M73.977 72.792L149.737 60.9609C151.369 60.7061 152.9 61.8183 153.162 63.4492L160.522 109.268C160.785 110.904 159.672 112.443 158.036 112.706C158.032 112.707 158.027 112.707 158.023 112.708L82.2629 124.539C80.631 124.794 79.1 123.682 78.838 122.051L71.4779 76.2319C71.2151 74.596 72.3282 73.0568 73.9641 72.794C73.9684 72.7933 73.9727 72.7927 73.977 72.792Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M170.75 77.25H92.25C90.0409 77.25 88.25 79.0409 88.25 81.25V129.75C88.25 131.959 90.0409 133.75 92.25 133.75H170.75C172.959 133.75 174.75 131.959 174.75 129.75V81.25C174.75 79.0409 172.959 77.25 170.75 77.25Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path d="M173.5 89H89.5V103H173.5V89Z" fill="var(--color-dap-blue-075)" />
+		<path
+			d="M174.171 89H108.331M168.171 102H89.3315M125.062 121H96.7546M103.289 89H96.0926"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);

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

@@ -0,0 +1,61 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoDeviceIllustration: 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 />
+		<g transform="translate(51 19)">
+			<g transform="translate(18.368 47.899)">
+				<path d="M102.264 12.4107L83.4 0L82.6554 56.0964L102.264 68.5071V12.4107Z" fill="var(--background)" />
+				<path d="M20.85 68.5071L1.98571 56.0964H82.6554L102.264 68.5071H20.85Z" fill="var(--background)" />
+				<path
+					d="M18.8643 67.7625L0 55.3518V0.248214L19.6089 12.6589L18.8643 67.7625Z"
+					fill="var(--background)"
+				/>
+			</g>
+			<path
+				d="M38 21.303L49.1 33.756M90.1 21.303L79 33.756M64 17V33.756"
+				stroke="var(--color-dap-blue-300)"
+				strokeWidth="2.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<rect x="19" y="48" width="82" height="56" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+			<path
+				d="M19 48H101L120 61H38.5L19 48Z"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M19 104H101L120 117H38.5L19 104Z"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinejoin="round"
+			/>
+			<rect x="38" y="61" width="82" height="56" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+			<path
+				d="M2 117H2.5M6 117H9.5M14 117H125M130 117H133.5M137 117H137.5"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinecap="round"
+			/>
+			<path
+				d="M44 127H50M54 127H84M88 127H94"
+				stroke="var(--color-dap-blue-700)"
+				strokeWidth="2.5"
+				strokeLinecap="round"
+			/>
+			<path d="M66 129H72" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+			<path d="M60 131H79" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" strokeLinecap="round" />
+		</g>
+	</svg>
+);

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

@@ -0,0 +1,52 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoDocumentsIllustration: 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="M153.672 64L162.974 131.843L163.81 138.649C164.079 140.842 162.52 142.837 160.327 143.107L101.767 150.297C99.5743 150.566 97.5785 149.007 97.3093 146.814L88.2935 73.3868C88.1589 72.2904 88.9386 71.2925 90.0349 71.1579C90.0418 71.1571 90.0488 71.1563 90.0557 71.1555L94.9141 70.6105M98.8422 70.1698L103.429 69.6553L98.8422 70.1698Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M154.911 63.8302C154.817 63.1463 154.186 62.6678 153.503 62.7616C152.819 62.8554 152.34 63.4859 152.434 64.1698L153.672 64L154.911 63.8302ZM162.974 131.843L164.215 131.69C164.214 131.685 164.213 131.679 164.213 131.673L162.974 131.843ZM160.327 143.107L160.175 141.866L160.327 143.107ZM101.767 150.297L101.919 151.538L101.767 150.297ZM97.3093 146.814L98.55 146.662L97.3093 146.814ZM88.2935 73.3868L89.5342 73.2344L88.2935 73.3868ZM90.0557 71.1555L89.9163 69.9133V69.9133L90.0557 71.1555ZM95.0534 71.8527C95.7394 71.7758 96.2332 71.1572 96.1563 70.4712C96.0793 69.7851 95.4608 69.2913 94.7747 69.3683L94.9141 70.6105L95.0534 71.8527ZM98.7028 68.9276C98.0168 69.0046 97.523 69.6231 97.6 70.3092C97.6769 70.9952 98.2955 71.489 98.9815 71.412L98.8422 70.1698L98.7028 68.9276ZM103.569 70.8975C104.255 70.8205 104.748 70.202 104.671 69.5159C104.594 68.8299 103.976 68.3361 103.29 68.4131L103.429 69.6553L103.569 70.8975ZM153.672 64L152.434 64.1698L161.736 132.013L162.974 131.843L164.213 131.673L154.911 63.8302L153.672 64ZM162.974 131.843L161.734 131.995L162.569 138.801L163.81 138.649L165.051 138.497L164.215 131.69L162.974 131.843ZM163.81 138.649L162.569 138.801C162.754 140.309 161.682 141.681 160.175 141.866L160.327 143.107L160.48 144.347C163.357 143.994 165.404 141.375 165.051 138.497L163.81 138.649ZM160.327 143.107L160.175 141.866L101.615 149.056L101.767 150.297L101.919 151.538L160.48 144.347L160.327 143.107ZM101.767 150.297L101.615 149.056C100.107 149.241 98.7351 148.169 98.55 146.662L97.3093 146.814L96.0686 146.967C96.422 149.845 99.0414 151.891 101.919 151.538L101.767 150.297ZM97.3093 146.814L98.55 146.662L89.5342 73.2344L88.2935 73.3868L87.0529 73.5391L96.0686 146.967L97.3093 146.814ZM88.2935 73.3868L89.5342 73.2344C89.4837 72.8233 89.7761 72.4491 90.1872 72.3986L90.0349 71.1579L89.8826 69.9173C88.101 70.136 86.8341 71.7576 87.0529 73.5391L88.2935 73.3868ZM90.0349 71.1579L90.1872 72.3986C90.1898 72.3983 90.1924 72.398 90.195 72.3977L90.0557 71.1555L89.9163 69.9133C89.9051 69.9145 89.8938 69.9159 89.8826 69.9173L90.0349 71.1579ZM90.0557 71.1555L90.195 72.3977L95.0534 71.8527L94.9141 70.6105L94.7747 69.3683L89.9163 69.9133L90.0557 71.1555ZM98.8422 70.1698L98.9815 71.412L103.569 70.8975L103.429 69.6553L103.29 68.4131L98.7028 68.9276L98.8422 70.1698ZM103.429 69.6553L103.29 68.4131L98.7028 68.9276L98.8422 70.1698L98.9815 71.412L103.569 70.8975L103.429 69.6553Z"
+			fill="var(--color-dap-blue-700)"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M151.14 68.2692L159.559 129.753L160.317 135.921C160.561 137.908 159.167 139.715 157.203 139.956L104.761 146.395C102.797 146.636 101.008 145.22 100.764 143.233L92.6139 76.8568C92.4792 75.7605 93.2589 74.7626 94.3552 74.628L100.843 73.8314"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M110.672 51.25H156.229C156.958 51.25 157.657 51.5393 158.173 52.0547L171.616 65.4902C172.132 66.0059 172.422 66.7053 172.422 67.4346V130C172.422 131.519 171.191 132.75 169.672 132.75H110.672C109.153 132.75 107.922 131.519 107.922 130V54C107.922 52.4812 109.153 51.25 110.672 51.25Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M156.672 52.4028V64C156.672 65.6569 158.015 67 159.672 67H167.605"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M118 118H144M118 67H144H118ZM118 79H161H118ZM118 92H161H118ZM118 105H161H118Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);

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

@@ -0,0 +1,57 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const NoGpsIllustration: 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="M72.7707 94H71.8228C65.7592 94 60.8438 89.0917 60.8438 83.037C60.8438 76.9824 65.7592 72.0741 71.8228 72.0741C71.8619 72.0741 71.901 72.0743 71.9401 72.0747C72.9161 63.5831 79.8646 57 88.2914 57C97.1731 57 104.413 64.3132 104.748 73.4661C110.118 73.8128 114.844 79.0396 114.844 84.4897C114.844 88.9647 111.53 94 107.604 94H80.302"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M130 48.25C148.618 48.25 163.75 63.6345 163.75 82.6611C163.75 88.5219 161.289 96.1665 156.169 105.663C151.064 115.133 143.382 126.324 133.1 139.241C132.924 139.462 132.727 139.663 132.511 139.842C130.801 141.254 128.294 140.992 126.9 139.241C116.618 126.324 108.936 115.133 103.831 105.663C98.7114 96.1665 96.2501 88.5219 96.25 82.6611C96.25 63.6345 111.382 48.25 130 48.25Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			d="M142.268 54.711C152.7 59.5587 160 70.3999 160 83.0645C160 88.1869 157.854 95.1882 153.036 104.252C148.257 113.243 141.026 123.94 131.276 136.363C131.201 136.459 131.117 136.545 131.027 136.621C130.329 137.206 129.311 137.11 128.725 136.363C118.975 123.94 111.743 113.243 106.963 104.252C105.84 102.139 104.863 100.137 104.024 98.2452C108.23 96.3972 112.215 94.1381 115.929 91.5196C118.717 96.4732 123.974 99.8126 130 99.8126C138.942 99.8124 146.19 92.4611 146.191 83.3926C146.191 76.7074 142.252 70.9545 136.599 68.3926C138.958 64.0918 140.868 59.5105 142.268 54.711Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M112.921 138.23C113.601 138.109 114.053 137.459 113.931 136.78C113.81 136.1 113.16 135.648 112.481 135.77L112.701 137L112.921 138.23ZM105.508 137.4C104.846 137.598 104.471 138.295 104.669 138.956C104.867 139.618 105.563 139.993 106.225 139.795L105.866 138.598L105.508 137.4ZM102.206 141.234C102.84 140.961 103.132 140.226 102.859 139.592C102.586 138.958 101.851 138.665 101.217 138.938L101.711 140.086L102.206 141.234ZM148.047 135.866C147.369 135.74 146.716 136.187 146.59 136.866C146.463 137.545 146.911 138.197 147.59 138.324L147.818 137.095L148.047 135.866ZM112.701 137L112.481 135.77C109.957 136.221 107.616 136.769 105.508 137.4L105.866 138.598L106.225 139.795C108.229 139.195 110.476 138.668 112.921 138.23L112.701 137ZM101.711 140.086L101.217 138.938C99.0329 139.878 97.2097 140.963 95.9133 142.191C94.6152 143.421 93.75 144.892 93.75 146.565H95H96.25C96.25 145.815 96.6302 144.956 97.6326 144.006C98.6367 143.055 100.169 142.111 102.206 141.234L101.711 140.086ZM95 146.565H93.75C93.75 148.663 95.1011 150.435 97.0049 151.85C98.9322 153.282 101.641 154.519 104.876 155.535C111.362 157.574 120.244 158.815 130 158.815V157.565V156.315C120.426 156.315 111.808 155.093 105.626 153.15C102.528 152.177 100.111 151.043 98.496 149.843C96.8576 148.626 96.25 147.504 96.25 146.565H95ZM130 157.565V158.815C139.756 158.815 148.638 157.574 155.124 155.535C158.359 154.519 161.068 153.282 162.995 151.85C164.899 150.435 166.25 148.663 166.25 146.565H165H163.75C163.75 147.504 163.142 148.626 161.504 149.843C159.889 151.043 157.472 152.177 154.374 153.15C148.192 155.093 139.574 156.315 130 156.315V157.565ZM165 146.565H166.25C166.25 143.797 163.925 141.591 160.86 139.937C157.693 138.227 153.258 136.836 148.047 135.866L147.818 137.095L147.59 138.324C152.665 139.269 156.821 140.598 159.673 142.137C162.627 143.731 163.75 145.302 163.75 146.565H165Z"
+			fill="var(--color-dap-blue-700)"
+		/>
+		<circle cx="130" cy="83" r="15.75" stroke="var(--color-dap-blue-700)" strokeWidth="2.5" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M172.789 57.2237C171.875 54.9372 170.063 53.1254 167.776 52.2106L166 51.5L167.776 50.7894C170.063 49.8746 171.875 48.0628 172.789 45.7763L173.5 44L174.211 45.7763C175.125 48.0628 176.937 49.8746 179.224 50.7894L181 51.5L179.224 52.2106C176.937 53.1254 175.125 54.9372 174.211 57.2237L173.5 59L172.789 57.2237Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinejoin="round"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M152.691 128H152C147.582 128 144 124.418 144 120C144 115.582 147.582 112 152 112C152.029 112 152.057 112 152.085 112C152.797 105.804 157.86 101 164 101C170.472 101 175.747 106.337 175.991 113.016C179.904 113.269 183.348 117.083 183.348 121.06C183.348 124.326 180.933 128 178.072 128H158.178"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);