@drivenets/design-system 0.18.0 → 0.19.0

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -114,9 +114,11 @@ const Item: React.FC<DsDropdownMenuItemProps> = ({
 	children,
 	className,
 	style,
+	...rest
 }) => {
 	return (
 		<Menu.Item
+			{...rest}
 			disabled={disabled}
 			className={classNames(
 				styles.item,

package/src/components/ds-empty-state/ds-empty-state.module.scss

@@ -0,0 +1,16 @@
+.root {
+	text-align: center;
+}
+
+.illustration {
+	flex-shrink: 0;
+	width: 250px;
+	height: 200px;
+	max-width: 100%;
+
+	svg {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+}

package/src/components/ds-empty-state/ds-empty-state.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { DsIllustration } from '../ds-illustration';
+import { DsStack } from '../ds-stack';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-empty-state.module.scss';
+import { defaultDsEmptyStateMessages, type DsEmptyStateProps } from './ds-empty-state.types';
+
+/**
+ * Centered empty-state cluster: illustration, message, and an optional action.
+ *
+ * Use `noData` when the collection has no records and `noMatches` when a search
+ * or filter yielded zero items. Pass `action` for a consumer-owned button.
+ */
+const DsEmptyState = ({
+	variant = 'noData',
+	message,
+	illustration,
+	action,
+	className,
+	style,
+	ref,
+}: DsEmptyStateProps) => {
+	illustration ??= <DsIllustration variant={variant === 'noMatches' ? 'no-search-result' : 'empty-inbox'} />;
+	const resolvedMessage = message ?? defaultDsEmptyStateMessages[variant];
+
+	return (
+		<div ref={ref} className={classNames(styles.root, className)} style={style} role="status">
+			<DsStack direction="column" alignItems="center" justifyContent="center" gap="var(--xs)">
+				<div className={styles.illustration} aria-hidden="true">
+					{illustration}
+				</div>
+				<DsStack direction="column" alignItems="center" gap="var(--lg)">
+					<DsTypography variant="body-md-reg" color="var(--color-dap-gray-700)">
+						{resolvedMessage}
+					</DsTypography>
+					{action}
+				</DsStack>
+			</DsStack>
+		</div>
+	);
+};
+
+DsEmptyState.displayName = 'DsEmptyState';
+
+export default DsEmptyState;

package/src/components/ds-empty-state/ds-empty-state.types.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+
+export const dsEmptyStateVariants = ['noData', 'noMatches'] as const;
+export type DsEmptyStateVariant = (typeof dsEmptyStateVariants)[number];
+
+export const defaultDsEmptyStateMessages: Record<DsEmptyStateVariant, string> = Object.freeze({
+	noData: 'No data to display.',
+	noMatches: 'No matching records found.',
+});
+
+export interface DsEmptyStateProps {
+	/**
+	 * Which empty-state reason to present.
+	 * @default 'noData'
+	 */
+	variant?: DsEmptyStateVariant;
+
+	/**
+	 * Overrides the default copy for the active variant.
+	 */
+	message?: string;
+
+	/**
+	 * Replaces the bundled illustration for the active variant.
+	 */
+	illustration?: ReactNode;
+
+	/**
+	 * Optional action, typically a button. Omitted from the table's inferred default.
+	 */
+	action?: ReactNode;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	ref?: Ref<HTMLDivElement>;
+}

package/src/components/ds-empty-state/index.ts

@@ -0,0 +1,3 @@
+export { default as DsEmptyState } from './ds-empty-state';
+export type { DsEmptyStateProps, DsEmptyStateVariant } from './ds-empty-state.types';
+export { dsEmptyStateVariants } from './ds-empty-state.types';

package/src/components/ds-file-upload/ds-file-upload.tsx

@@ -4,7 +4,10 @@ import { FileUpload } from './components/file-upload';
 import { useFileUpload } from './hooks';
 
 /**
- * Design system File Upload component (with state management)
+ * File upload with built-in state management (progress, retries, cancellation).
+ *
+ * Pass an `adapter` implementing `FileUploadAdapter` to connect it to your backend:
+ * `const adapter = getSimpleFileUploadAdapter('/api/upload')`.
  */
 const DsFileUpload: React.FC<DsFileUploadProps> = ({
 	adapter,

package/src/components/ds-form-control/ds-form-control.tsx

@@ -28,13 +28,21 @@ const useFormControlContext = () => {
  * into any component that expects an 'id' prop.
  *
  * @param Component - The component to wrap with form control context
+ * @param displayName - Compound display name so Storybook Show code renders the member name
  * @returns A new component that automatically receives the controlId
  */
-const controlify = <TProps extends { id?: string }>(Component: ComponentType<TProps>) => {
-	return function WrappedFormControl(props: TProps) {
+const controlify = <TProps extends { id?: string }>(
+	Component: ComponentType<TProps>,
+	displayName: string,
+) => {
+	const WrappedFormControl = (props: TProps) => {
 		const { controlId } = useFormControlContext();
 		return <Component id={controlId} {...props} />;
 	};
+
+	WrappedFormControl.displayName = displayName;
+
+	return WrappedFormControl;
 };
 
 const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ children, className }) => {
@@ -100,15 +108,15 @@ DsFormControlDescription.displayName = 'DsFormControl.Description';
 
 const DsFormControl = Object.assign(DsFormControlRoot, {
 	displayName: 'DsFormControl',
-	TextInput: controlify(DsTextInput),
-	NumberInput: controlify(DsNumberInput),
-	PasswordInput: controlify(DsPasswordInput),
+	TextInput: controlify(DsTextInput, 'DsFormControl.TextInput'),
+	NumberInput: controlify(DsNumberInput, 'DsFormControl.NumberInput'),
+	PasswordInput: controlify(DsPasswordInput, 'DsFormControl.PasswordInput'),
 	/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
-	DateInput: controlify(DsDateInput),
-	DatePicker: controlify(DsDatePicker),
-	TimePicker: controlify(DsTimePicker),
-	Textarea: controlify(DsTextarea),
-	Select: controlify(DsSelect),
+	DateInput: controlify(DsDateInput, 'DsFormControl.DateInput'),
+	DatePicker: controlify(DsDatePicker, 'DsFormControl.DatePicker'),
+	TimePicker: controlify(DsTimePicker, 'DsFormControl.TimePicker'),
+	Textarea: controlify(DsTextarea, 'DsFormControl.Textarea'),
+	Select: controlify(DsSelect, 'DsFormControl.Select'),
 	Description: DsFormControlDescription,
 });
 

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=27983-34300
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-illustration
+// component=DsIllustration
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant =
+	instance.getEnum('Property 1', {
+		Done: 'done',
+		EmptyInbox: 'empty-inbox',
+		Error: 'error',
+		NoConnection: 'no-connection',
+		NoCreditCard: 'no-credit-card',
+		NoDocuments: 'no-documents',
+		NoGPS: 'no-gps',
+		NoImages: 'no-images',
+		NoItemsCart: 'no-items-cart',
+		NoMessages: 'no-messages',
+		NoSearchResult: 'no-search-result',
+		NoTasks: 'no-tasks',
+		'No Device': 'no-device',
+		'Go Filter': 'go-filter',
+		Device: 'device',
+		Site: 'site',
+		configuration: 'configuration',
+	}) ?? 'no-tasks';
+
+export default {
+	example: figma.code`<DsIllustration variant="${variant}" />`,
+	imports: ["import { DsIllustration } from '@drivenets/design-system';"],
+	id: 'ds-illustration',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-illustration/ds-illustration.module.scss

@@ -0,0 +1,6 @@
+.root {
+	display: block;
+	width: 250px;
+	height: 200px;
+	max-width: 100%;
+}

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

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import styles from './ds-illustration.module.scss';
+import { illustrations } from './illustrations';
+import type { DsIllustrationProps } from './ds-illustration.types';
+
+const DsIllustration = ({
+	variant = 'no-tasks',
+	className,
+	style,
+	ref,
+	'aria-hidden': ariaHidden = true,
+	'aria-label': ariaLabel,
+}: DsIllustrationProps) => {
+	const Svg = illustrations[variant];
+
+	return (
+		<Svg
+			ref={ref}
+			className={classNames(styles.root, className)}
+			style={style}
+			aria-hidden={ariaHidden}
+			aria-label={ariaLabel}
+		/>
+	);
+};
+
+DsIllustration.displayName = 'DsIllustration';
+
+export default DsIllustration;

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

@@ -0,0 +1,45 @@
+import type { CSSProperties, Ref } from 'react';
+
+export const dsIllustrationVariants = [
+	'configuration',
+	'device',
+	'done',
+	'empty-inbox',
+	'error',
+	'go-filter',
+	'no-connection',
+	'no-credit-card',
+	'no-device',
+	'no-documents',
+	'no-gps',
+	'no-images',
+	'no-items-cart',
+	'no-messages',
+	'no-search-result',
+	'no-tasks',
+	'site',
+] as const;
+
+export type DsIllustrationVariant = (typeof dsIllustrationVariants)[number];
+
+export interface DsIllustrationProps {
+	/**
+	 * Which empty-screen tile to render.
+	 * @default 'no-tasks'
+	 */
+	variant?: DsIllustrationVariant;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	ref?: Ref<SVGSVGElement>;
+
+	/**
+	 * Decorative by default. Set `false` with `aria-label` when the tile is informative.
+	 * @default true
+	 */
+	'aria-hidden'?: boolean | 'true' | 'false';
+
+	'aria-label'?: string;
+}

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

@@ -0,0 +1,51 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const ConfigurationIllustration: 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="M140.238 48.25C140.621 48.2501 140.937 48.5362 140.982 48.9062L140.987 48.9482L140.995 48.9912L142.683 57.7295L142.821 58.4473L143.515 58.6777C144.17 58.8963 144.82 59.1328 145.466 59.3857L146.11 59.6445C146.961 59.9964 147.798 60.3775 148.622 60.7949L149.278 61.127L149.888 60.7148L157.375 55.6494C157.688 55.4384 158.104 55.495 158.351 55.7715L158.375 55.7998L158.401 55.8252L170.512 67.9355C170.777 68.2026 170.8 68.6213 170.579 68.9121L170.559 68.9395L170.539 68.9678L165.535 76.3623L165.124 76.9688L165.453 77.624C165.866 78.4456 166.252 79.2849 166.603 80.1338L166.604 80.1357C166.955 80.9829 167.28 81.8519 167.57 82.7344L167.8 83.4316L168.521 83.5713L177.393 85.2822H177.394C177.749 85.3506 178 85.6645 178 86.0156L178.004 103.253C178.004 103.636 177.718 103.952 177.348 103.997L177.306 104.002L177.263 104.01L168.521 105.697L167.8 105.837L167.57 106.534C167.284 107.404 166.959 108.269 166.606 109.123L166.604 109.128C166.259 109.972 165.874 110.807 165.457 111.638L165.128 112.292L165.539 112.898L170.603 120.383V120.384C170.782 120.651 170.769 120.989 170.598 121.234L170.515 121.334L158.323 133.525C158.058 133.791 157.64 133.815 157.349 133.599L157.326 133.581L157.303 133.565L149.889 128.546L149.281 128.135L148.626 128.464C147.796 128.881 146.957 129.267 146.119 129.614H146.118C145.273 129.965 144.408 130.286 143.523 130.577L142.826 130.807L142.687 131.528L140.976 140.399V140.4C140.907 140.755 140.594 141.007 140.242 141.007L123.004 141.011L122.864 140.998C122.547 140.938 122.301 140.679 122.261 140.352L122.255 140.309L122.247 140.267L120.563 131.528L120.425 130.807L119.727 130.577C118.853 130.29 117.992 129.968 117.152 129.62L117.055 129.577L117.029 129.567L116.419 129.307C115.811 129.041 115.211 128.758 114.62 128.458L113.963 128.125L113.354 128.538L105.873 133.604L105.872 133.605C105.576 133.806 105.181 133.763 104.936 133.515L104.931 133.51L92.7432 121.326L92.7383 121.321L92.6543 121.222C92.4826 120.976 92.4752 120.639 92.6494 120.38L97.7148 112.895L98.126 112.288L97.7969 111.633C97.3842 110.811 96.9983 109.972 96.6475 109.123L96.6465 109.121C96.2943 108.273 95.9697 107.408 95.6797 106.526L95.4502 105.829L94.7295 105.689L85.8623 103.979H85.8604C85.5057 103.91 85.254 103.597 85.2539 103.245L85.25 86.0068L85.2627 85.8672C85.3222 85.5505 85.581 85.3038 85.9092 85.2637L85.9521 85.2578L85.9941 85.25L94.7324 83.5664L95.4531 83.4277L95.6826 82.7314C95.9734 81.8517 96.2992 80.9802 96.6484 80.1299L96.6475 80.1289C96.9934 79.2907 97.3796 78.4579 97.7998 77.625L98.1309 76.9688L97.7188 76.3604L92.6523 68.876C92.4415 68.5611 92.502 68.1441 92.7734 67.9043L92.8018 67.8789L92.8291 67.8516L104.934 55.7422C105.199 55.4772 105.617 55.4527 105.909 55.6699L105.932 55.6865L105.955 55.7021L113.365 60.7178L113.973 61.1299L114.629 60.7988C115.457 60.381 116.286 59.9975 117.123 59.6533L117.214 59.6191L117.228 59.6143L117.24 59.6084C118.062 59.2715 118.898 58.9606 119.738 58.6807L120.432 58.4502L120.57 57.7324L122.281 48.8652V48.8633C122.349 48.5088 122.663 48.257 123.015 48.2568V48.2529L140.238 48.25Z"
+			fill="var(--background)"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M154.29 112.995C155.197 111.885 156.012 110.723 156.736 109.521C158.327 106.877 159.474 104.036 160.175 101.107C160.883 98.1449 161.136 95.0927 160.931 92.0628C160.752 89.4188 160.224 86.7918 159.347 84.2564C158.476 81.741 157.262 79.3156 155.701 77.0533C154.772 75.7052 153.719 74.4149 152.544 73.198C150.818 71.4113 148.925 69.8838 146.914 68.6165C144.753 67.2549 142.456 66.1935 140.082 65.4337C137.11 64.4822 134.018 64.0035 130.926 64C128.519 63.9973 126.113 64.2823 123.762 64.856C121.116 65.5018 118.54 66.5137 116.115 67.893C113.983 69.1055 111.968 70.602 110.123 72.3835C107.804 74.6223 105.926 77.146 104.49 79.8469C103.084 82.4912 102.102 85.3053 101.546 88.1883C100.972 91.1584 100.85 94.2016 101.182 97.2072C101.612 101.103 102.803 104.935 104.759 108.464C106.011 110.722 107.577 112.856 109.456 114.802C112.44 117.892 115.924 120.206 119.655 121.741C124.193 123.607 129.096 124.319 133.912 123.869C137.953 123.492 141.933 122.296 145.583 120.276"
+			fill="var(--background)"
+		/>
+		<path
+			d="M154.29 112.995C155.197 111.885 156.012 110.723 156.736 109.521C158.327 106.877 159.474 104.036 160.175 101.107C160.883 98.1449 161.136 95.0927 160.931 92.0628C160.752 89.4188 160.224 86.7918 159.347 84.2564C158.476 81.741 157.262 79.3156 155.701 77.0533C154.772 75.7052 153.719 74.4149 152.544 73.198C150.818 71.4113 148.925 69.8838 146.914 68.6165C144.753 67.2549 142.456 66.1935 140.082 65.4337C137.11 64.4822 134.018 64.0035 130.926 64C128.519 63.9973 126.113 64.2823 123.762 64.856C121.116 65.5018 118.54 66.5137 116.115 67.893C113.983 69.1055 111.968 70.602 110.123 72.3835C107.804 74.6223 105.926 77.146 104.49 79.8469C103.084 82.4912 102.102 85.3053 101.546 88.1883C100.972 91.1584 100.85 94.2016 101.182 97.2072C101.612 101.103 102.803 104.935 104.759 108.464C106.011 110.722 107.577 112.856 109.456 114.802C112.44 117.892 115.924 120.206 119.655 121.741C124.193 123.607 129.096 124.319 133.912 123.869C137.953 123.492 141.933 122.296 145.583 120.276"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M157 95.62C156.823 95.6232 156.645 95.6248 156.468 95.6248C140.834 95.6248 128.034 83.4367 126.961 68C114.518 69.9628 105 80.7849 105 93.8412C105 108.288 116.654 120 131.03 120C144.81 120 156.09 109.238 157 95.62Z"
+			fill="var(--color-dap-blue-075)"
+		/>
+		<path
+			d="M124.755 71.4868C123.483 71.9639 122.24 72.5437 121.04 73.2264C119.175 74.2873 117.412 75.5966 115.798 77.1553C115.136 77.7943 114.515 78.4597 113.936 79.1485"
+			stroke="var(--color-dap-blue-400)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+		<path
+			d="M111.142 82.5464C110.682 83.2428 110.258 83.9568 109.87 84.6854C109.584 85.2236 109.318 85.7698 109.072 86.3229"
+			stroke="var(--color-dap-blue-400)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);

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

@@ -0,0 +1,133 @@
+import type { FC, SVGProps } from 'react';
+import { IllustrationClouds } from './illustration-clouds';
+
+export const DeviceIllustration: 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="M143.375 63H109.625C106.518 63 104 65.2565 104 68.04V78.96C104 81.7435 106.518 84 109.625 84H143.375C146.482 84 149 81.7435 149 78.96V68.04C149 65.2565 146.482 63 143.375 63Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M113.25 113H84.75C82.1266 113 80 115.364 80 118.28V129.72C80 132.636 82.1266 135 84.75 135H113.25C115.873 135 118 132.636 118 129.72V118.28C118 115.364 115.873 113 113.25 113Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M169.25 113H140.75C138.127 113 136 115.364 136 118.28V129.72C136 132.636 138.127 135 140.75 135H169.25C171.873 135 174 132.636 174 129.72V118.28C174 115.364 171.873 113 169.25 113Z"
+			fill="var(--background)"
+		/>
+		<path
+			d="M93 109V103H156V109"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="square"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M125 94L125 102"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="square"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M144.125 62.625H105.875C102.354 62.625 99.5 65.4792 99.5 69V82.8125C99.5 86.3333 102.354 89.1875 105.875 89.1875H144.125C147.646 89.1875 150.5 86.3333 150.5 82.8125V69C150.5 65.4792 147.646 62.625 144.125 62.625Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M112.25 113.625H82.5C78.9792 113.625 76.125 116.479 76.125 120V133.813C76.125 137.333 78.9792 140.188 82.5 140.188H112.25C115.771 140.188 118.625 137.333 118.625 133.813V120C118.625 116.479 115.771 113.625 112.25 113.625Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M167.5 113.625H137.75C134.229 113.625 131.375 116.479 131.375 120V133.813C131.375 137.333 134.229 140.188 137.75 140.188H167.5C171.021 140.188 173.875 137.333 173.875 133.813V120C173.875 116.479 171.021 113.625 167.5 113.625Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M139 70C140.795 70 142.25 71.4551 142.25 73.25C142.25 75.0449 140.795 76.5 139 76.5C137.205 76.5 135.75 75.0449 135.75 73.25C135.75 71.4551 137.205 70 139 70Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M113.5 72.6129V80.2629"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M123.062 72.6129V80.2629"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M109.25 121C111.045 121 112.5 122.455 112.5 124.25C112.5 126.045 111.045 127.5 109.25 127.5C107.455 127.5 106 126.045 106 124.25C106 122.455 107.455 121 109.25 121Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M88 123.613V131.263"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M97.5625 123.613V131.263"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M164.5 121C166.295 121 167.75 122.455 167.75 124.25C167.75 126.045 166.295 127.5 164.5 127.5C162.705 127.5 161.25 126.045 161.25 124.25C161.25 122.455 162.705 121 164.5 121Z"
+			stroke="var(--color-dap-blue-700)"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M143.25 123.613V131.263"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M152.812 123.613V131.263"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="3"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M99 34.3027L110.1 46.7559M151.1 34.3027L140 46.7559L151.1 34.3027ZM125 30V46.7559V30Z"
+			stroke="var(--color-dap-blue-300)"
+			strokeWidth="2.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);

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"