@drivenets/design-system 0.18.0 → 0.19.0

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>
+);

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>
+);