@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-filters-bar/ds-filters-bar.utils.ts

@@ -0,0 +1,141 @@
+import {
+	filtersBarViews,
+	type DsFilterCondition,
+	type DsFilterField,
+	type DsFilterOption,
+	type DsFilterRange,
+	type DsFilterScalarField,
+	type DsFilterSearchCondition,
+	type DsFilterValue,
+	type DsFiltersBarView,
+} from './ds-filters-bar.types';
+
+const ID_RANDOM_WORDS = 2;
+const HEX_RADIX = 16;
+
+const QUERY_LOCKED_VIEWS: ReadonlyArray<DsFiltersBarView> = Object.freeze(['filters', 'builder']);
+const NO_LOCKED_VIEWS: ReadonlyArray<DsFiltersBarView> = Object.freeze([]);
+
+export const isFiltersBarView = (value: string | null): value is DsFiltersBarView =>
+	filtersBarViews.some((view) => view === value);
+
+/**
+ * Blank query text is not an edited query: it hands control back to the conditions.
+ */
+export const normalizeQuery = (query: string | null): string | null => (query?.trim() ? query : null);
+
+export const lockedViewsFor = (query: string | null): ReadonlyArray<DsFiltersBarView> =>
+	query === null ? NO_LOCKED_VIEWS : QUERY_LOCKED_VIEWS;
+
+/**
+ * Random, so ids stay unique across reloads and conditions restored from a **Saved filter**.
+ * `crypto.randomUUID` is avoided because it needs a secure context.
+ */
+export const createConditionId = (): string => {
+	const words = crypto.getRandomValues(new Uint32Array(ID_RANDOM_WORDS));
+
+	return `condition-${Array.from(words, (word) => word.toString(HEX_RADIX)).join('')}`;
+};
+
+export const createSearchCondition = (text: string): DsFilterSearchCondition | null => {
+	const trimmed = text.trim();
+
+	if (!trimmed) {
+		return null;
+	}
+
+	return { kind: 'search', id: createConditionId(), text: trimmed };
+};
+
+export const appendCondition = (
+	conditions: ReadonlyArray<DsFilterCondition>,
+	condition: DsFilterCondition,
+): ReadonlyArray<DsFilterCondition> => [...conditions, condition];
+
+export const replaceCondition = (
+	conditions: ReadonlyArray<DsFilterCondition>,
+	condition: DsFilterCondition,
+): ReadonlyArray<DsFilterCondition> =>
+	conditions.map((item) => (item.id === condition.id ? condition : item));
+
+export const removeConditionById = (
+	conditions: ReadonlyArray<DsFilterCondition>,
+	id: string,
+): ReadonlyArray<DsFilterCondition> => conditions.filter((item) => item.id !== id);
+
+/**
+ * Shared by the summary line and the chips, so every view words a condition the same way
+ */
+export interface DsFilterConditionDescription {
+	/**
+	 * Field then subfield labels, for example `['Input', 'Name']`. Empty for search conditions.
+	 */
+	fieldPath: ReadonlyArray<string>;
+	/**
+	 * Operator in words, for example `not equals`
+	 */
+	operator?: string;
+	/**
+	 * Operator in compact form for chips, for example `≠`
+	 */
+	operatorSymbol?: string;
+	value: string;
+}
+
+const RANGE_SEPARATOR = ' – ';
+
+const labelFor = (options: ReadonlyArray<DsFilterOption>, value: string) =>
+	options.find((option) => option.value === value)?.label ?? value;
+
+const isRange = (value: DsFilterValue): value is DsFilterRange<number> | DsFilterRange<string> =>
+	typeof value === 'object' && 'from' in value;
+
+const formatValue = (value: DsFilterValue, field: DsFilterScalarField | undefined): string => {
+	if (isRange(value)) {
+		return [value.from ?? '', value.to ?? ''].map(String).join(RANGE_SEPARATOR).trim();
+	}
+
+	if (typeof value === 'object') {
+		const options = field?.type === 'enum' ? field.options : [];
+
+		return value.map((item) => labelFor(options, item)).join(', ');
+	}
+
+	if (typeof value === 'string' && field?.type === 'date') {
+		return labelFor(field.presets ?? [], value);
+	}
+
+	return String(value);
+};
+
+/**
+ * Falls back to raw ids when a field, subfield, operator or option is missing from `fields`, so a
+ * **Saved filter** that references a removed field still shows instead of breaking the bar.
+ */
+export const describeCondition = (
+	condition: DsFilterCondition,
+	fields: ReadonlyArray<DsFilterField>,
+): DsFilterConditionDescription => {
+	if (condition.kind === 'search') {
+		return { fieldPath: [], value: condition.text };
+	}
+
+	const field = fields.find((item) => item.id === condition.field);
+	const subfield =
+		field?.type === 'compound' ? field.subfields.find((item) => item.id === condition.subfield) : undefined;
+	const scalarField = field?.type === 'compound' ? subfield : field;
+	const operator = scalarField?.operators.find((item) => item.value === condition.operator);
+
+	const fieldPath = [field?.label ?? condition.field];
+
+	if (condition.subfield) {
+		fieldPath.push(subfield?.label ?? condition.subfield);
+	}
+
+	return {
+		fieldPath,
+		operator: operator?.label ?? condition.operator,
+		operatorSymbol: operator?.symbol ?? operator?.label ?? condition.operator,
+		value: formatValue(condition.value, scalarField),
+	};
+};

package/src/components/ds-filters-bar/index.ts

@@ -0,0 +1 @@
+export { DsFiltersBar } from './ds-filters-bar';

package/src/components/ds-form-control/ds-form-control.module.scss

@@ -125,6 +125,24 @@ $form-control-description-max-height: calc(
 	}
 }
 
+// Stays in the tree while empty, so a message that appears later is announced. Out of the flex
+// flow while empty, so it adds no gap.
+.messageRegion:empty {
+	position: absolute;
+}
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	clip-path: inset(50%);
+}
+
 .message {
 	@include typography.body-xs-reg;
 	color: var(--font-secondary);

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

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { DsIcon } from '../ds-icon';
 import { DsSelect } from '../ds-select';
 import { DsTextInput } from '../ds-text-input';
+import { DsCodeInput } from '../ds-code-input';
 import { DsTextarea } from '../ds-textarea';
 import { DsNumberInput } from '../ds-number-input';
 import { DsPasswordInput } from '../ds-password-input';
@@ -13,7 +14,13 @@ import { DsDateInput } from '../ds-date-input';
 import { DsDatePicker } from '../ds-date-picker';
 import { DsTimePicker } from '../ds-time-picker';
 
-const FormControlContext = createContext<{ controlId: string } | null>(null);
+const FormControlContext = createContext<{
+	controlId: string;
+	/**
+	 * Id of the message, while there is one
+	 */
+	messageId?: string;
+} | null>(null);
 
 const useFormControlContext = () => {
 	const context = useContext(FormControlContext);
@@ -28,13 +35,40 @@ 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;
+};
+
+/**
+ * HOC, same as `controlify`. Also sets `aria-describedby` to the message, for inputs that accept that prop.
+ */
+const controlifyDescribed = <TProps extends { id?: string; 'aria-describedby'?: string }>(
+	Component: ComponentType<TProps>,
+	displayName: string,
+) => {
+	const WrappedFormControl = (props: TProps) => {
+		const { controlId, messageId } = useFormControlContext();
+		const describedBy = [messageId, props['aria-describedby']].filter(Boolean).join(' ') || undefined;
+
+		return <Component id={controlId} {...props} aria-describedby={describedBy} />;
+	};
+
+	WrappedFormControl.displayName = displayName;
+
+	return WrappedFormControl;
 };
 
 const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ children, className }) => {
@@ -55,10 +89,11 @@ const DsFormControlRoot = ({
 	children,
 }: DsFormControlProps) => {
 	const generatedId = useId();
+	const messageId = useId();
 	const controlId = id || generatedId;
 
 	return (
-		<FormControlContext.Provider value={{ controlId }}>
+		<FormControlContext.Provider value={{ controlId, messageId: message ? messageId : undefined }}>
 			<div
 				className={classNames(
 					styles.container,
@@ -69,7 +104,11 @@ const DsFormControlRoot = ({
 				)}
 				style={style}
 			>
-				{!hideLabel && (
+				{hideLabel ? (
+					<label htmlFor={controlId} className={styles.visuallyHidden}>
+						{label}
+					</label>
+				) : (
 					<div className={styles.labelContainer}>
 						<label
 							htmlFor={controlId}
@@ -85,12 +124,14 @@ const DsFormControlRoot = ({
 
 				{children}
 
-				{message && (
-					<div className={styles.message}>
-						<DsIcon icon={messageIcon} size="tiny" filled />
-						<span>{message}</span>
-					</div>
-				)}
+				<div className={styles.messageRegion} aria-live="polite">
+					{message && (
+						<div className={styles.message}>
+							<DsIcon icon={messageIcon} size="tiny" filled />
+							<span id={messageId}>{message}</span>
+						</div>
+					)}
+				</div>
 			</div>
 		</FormControlContext.Provider>
 	);
@@ -100,15 +141,16 @@ 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'),
+	CodeInput: controlifyDescribed(DsCodeInput, 'DsFormControl.CodeInput'),
+	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-form-control/ds-form-control.types.ts

@@ -18,7 +18,8 @@ export interface DsFormControlProps extends React.PropsWithChildren {
 	 */
 	label: string;
 	/**
-	 * When true, the label row is not rendered (e.g. inline table cell editors).
+	 * Hides the label row (e.g. inline table cell editors). The label stays as the control's
+	 * accessible name.
 	 */
 	hideLabel?: boolean;
 	/**

package/src/components/ds-icon/custom-icons/index.ts

@@ -49,6 +49,7 @@ import { SpecialWebhook } from './special-webhook';
 import { SpecialMapView } from './special-map-view';
 
 // Misc icons
+import { SpecialAdvFilters } from './special-adv-filters';
 import { SpecialHome } from './special-home';
 import { SpecialLeadingIcon } from './special-leading-icon';
 import { SpecialLego } from './special-lego';
@@ -120,6 +121,7 @@ export const customIcons = {
 	'special-map-view': SpecialMapView,
 
 	// Misc
+	'special-adv-filters': SpecialAdvFilters,
 	'special-home': SpecialHome,
 	'special-leading-icon': SpecialLeadingIcon,
 	'special-lego': SpecialLego,

package/src/components/ds-icon/custom-icons/special-adv-filters.tsx

@@ -0,0 +1,28 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Advanced Filters icon - magnifying glass with filter lines
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=42571-31078
+ */
+export const SpecialAdvFilters: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<path
+			d="M9.70117 12.1478C9.82249 12.1478 9.92473 12.1952 10.0068 12.2903C10.089 12.3856 10.1299 12.504 10.1299 12.6448C10.1299 12.7857 10.089 12.905 10.0068 13.0023C9.92473 13.0993 9.8225 13.1478 9.70117 13.1478H8.27344C8.15211 13.1478 8.04988 13.1003 7.96777 13.0052C7.88563 12.9099 7.84473 12.7915 7.84473 12.6507C7.84473 12.5099 7.88563 12.3905 7.96777 12.2933C8.04988 12.1962 8.15211 12.1478 8.27344 12.1478H9.70117Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M11.416 9.64777C11.5374 9.6478 11.6396 9.6951 11.7217 9.79034C11.8038 9.88561 11.8447 10.004 11.8447 10.1448C11.8447 10.2857 11.8038 10.405 11.7217 10.5023C11.6396 10.5994 11.5374 10.6477 11.416 10.6478H6.55859C6.43723 10.6477 6.33504 10.6004 6.25293 10.5052C6.1708 10.4099 6.12989 10.2915 6.12988 10.1507C6.12988 10.0099 6.1708 9.89049 6.25293 9.79327C6.33504 9.69609 6.43723 9.6478 6.55859 9.64777H11.416Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M12.5586 7.14777C12.68 7.14777 12.7821 7.19514 12.8643 7.29034C12.9464 7.38562 12.9873 7.50401 12.9873 7.64484C12.9873 7.78567 12.9464 7.90504 12.8643 8.00226C12.7821 8.09941 12.68 8.14777 12.5586 8.14777H5.41602C5.29463 8.14777 5.19248 8.10039 5.11035 8.00519C5.02821 7.90991 4.98731 7.79152 4.9873 7.6507C4.9873 7.50986 5.02821 7.3905 5.11035 7.29327C5.19248 7.19612 5.29463 7.14777 5.41602 7.14777H12.5586Z"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8.98535 2.14777C9.94489 2.14777 10.8519 2.3315 11.7061 2.69952C12.5602 3.06758 13.3036 3.56758 13.9355 4.19952C14.5675 4.83147 15.0675 5.57386 15.4355 6.42609C15.8036 7.27828 15.9873 8.18601 15.9873 9.14874C15.9873 9.98127 15.8491 10.7687 15.5723 11.511C15.2955 12.2535 14.9126 12.9311 14.4248 13.5433L17.4668 16.5853C17.6193 16.7329 17.6923 16.9052 17.6855 17.1019C17.6786 17.2988 17.5996 17.4745 17.4502 17.6273C17.3008 17.7797 17.1267 17.8557 16.9277 17.8558C16.7284 17.8558 16.5537 17.7798 16.4043 17.6273L13.3623 14.6058C12.7541 15.0933 12.0812 15.4724 11.3438 15.7425C10.6061 16.0126 9.82064 16.1478 8.9873 16.1478C8.01647 16.1478 7.10671 15.9641 6.25879 15.596C5.4111 15.228 4.66806 14.7277 4.0293 14.096C3.39041 13.4641 2.89041 12.7234 2.5293 11.8753C2.16829 11.0276 1.98736 10.1185 1.9873 9.14777C1.9873 8.18975 2.17104 7.28315 2.53906 6.42902C2.90712 5.57485 3.40627 4.83175 4.03516 4.19952C4.66407 3.56731 5.40284 3.06712 6.25195 2.69952C7.10137 2.33176 8.01274 2.14778 8.98535 2.14777ZM8.9873 3.64777C7.45523 3.64777 6.15525 4.18438 5.08789 5.25812C4.02067 6.33201 3.4873 7.62874 3.4873 9.14777C3.4873 10.6798 4.02066 11.9798 5.08691 13.0472C6.15288 14.1141 7.45106 14.6477 8.98145 14.6478C10.4989 14.6478 11.7967 14.1144 12.873 13.0482C13.9491 11.9822 14.4872 10.684 14.4873 9.15363C14.4873 7.63613 13.9507 6.33841 12.877 5.26202C11.8031 4.18565 10.5063 3.64777 8.9873 3.64777Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

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