@drivenets/design-system 0.14.0 → 0.16.0

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

@@ -5,6 +5,13 @@ import classNames from 'classnames';
 import styles from './ds-dialog.module.scss';
 import type { DsDialogProps } from './ds-dialog.types';
 
+/**
+ * @summary Lightweight controlled dialog for simple panels and popovers.
+ *
+ * Renders a Radix dialog with required accessible title, optional description,
+ * and custom body content. Use for focused overlays and menu-style panels.
+ * Prefer `DsModal` when you need structured header, body, and footer sections.
+ */
 const DsDialog: React.FC<DsDialogProps> = ({
 	open,
 	onOpenChange,
@@ -67,4 +74,6 @@ const DsDialog: React.FC<DsDialogProps> = ({
 	);
 };
 
+DsDialog.displayName = 'DsDialog';
+
 export default DsDialog;

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

@@ -36,7 +36,7 @@ export interface DsDialogProps {
 	/**
 	 * Ref to the element the dialog should be anchored to (for relative placement)
 	 */
-	anchorRef?: React.RefObject<HTMLElement>;
+	anchorRef?: React.RefObject<HTMLElement | null>;
 	/**
 	 * Custom fixed position (e.g., { top: number, left: number })
 	 */

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32735-122261
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-divider
+// component=DsDivider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('direction', {
+		Horizontal: 'horizontal',
+		Vertical: 'vertical',
+	}) ?? 'horizontal';
+
+export default {
+	example: figma.code`<DsDivider orientation="${orientation}" />`,
+	imports: ["import { DsDivider } from '@drivenets/design-system'"],
+	id: 'ds-divider',
+	metadata: { nestable: true },
+};

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

@@ -19,4 +19,6 @@ const DsDivider: React.FC<DsDividerProps> = ({ orientation = 'horizontal', compo
 	return <Component role="separator" aria-orientation={orientation} className={classes} style={style} />;
 };
 
+DsDivider.displayName = 'DsDivider';
+
 export default DsDivider;

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

@@ -56,6 +56,20 @@
 		transform 0.2s ease,
 		width 0.2s ease;
 
+	// A closed (or closing) drawer is invisible but stays mounted and transformed.
+	// Without this it still hit-tests and can swallow clicks on neighboring UI when
+	// docked at a non-zero offset. Keep it click-through whenever it is not open.
+	//
+	// `!important` is required: when this drawer is stacked with other open Ark
+	// dialogs (e.g. a non-modal drawer opened over another dialog), Ark's layer
+	// management writes an inline `pointer-events: auto` onto the content, which
+	// would otherwise win over this rule and let the closed drawer keep eating
+	// clicks. Overriding a third-party inline style is the canonical use of
+	// `!important`, and a closed drawer must never be a pointer target.
+	&[data-state='closed'] {
+		pointer-events: none !important;
+	}
+
 	&.position-end {
 		right: 0;
 		transform-origin: 100% 50%;

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, Fragment } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
+import { Dialog, type DialogRootProps } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import type { DsDrawerProps } from './ds-drawer.types';
@@ -12,6 +12,7 @@ import { useResponsiveValue } from '../../utils/responsive';
 const DsDrawer = ({
 	open,
 	onOpenChange,
+	onOpenAutoFocus,
 	columns = 4,
 	position = 'end',
 	backdrop = false,
@@ -29,6 +30,23 @@ const DsDrawer = ({
 		onOpenChange(details.open);
 	};
 
+	// Mirrors Radix's `onOpenAutoFocus`. Ark reads `initialFocusEl` when the drawer
+	// opens to decide what to focus. To honor `preventDefault()`, we point initial
+	// focus back at the element that was focused when the drawer opened (e.g. the
+	// input that triggered it), so the caret stays put. Returning `undefined` keeps
+	// Ark's default of focusing the first element inside the drawer. The cast covers
+	// the `undefined` branch, which sits outside Ark's `MaybeElement` return type.
+	const initialFocusEl = (
+		onOpenAutoFocus
+			? () => {
+					const event = new Event('openAutoFocus', { cancelable: true });
+					onOpenAutoFocus(event);
+
+					return event.defaultPrevented ? (document.activeElement as HTMLElement | null) : undefined;
+				}
+			: undefined
+	) as DialogRootProps['initialFocusEl'];
+
 	const Wrapper = portal ? Portal : Fragment;
 
 	return (
@@ -39,6 +57,7 @@ const DsDrawer = ({
 			closeOnEscape={closeOnEscape}
 			closeOnInteractOutside={closeOnInteractOutside}
 			preventScroll={backdrop}
+			initialFocusEl={initialFocusEl}
 		>
 			<Wrapper>
 				{backdrop && <Dialog.Backdrop className={styles.backdrop} />}
@@ -151,6 +170,14 @@ const Actions = ({
 	</div>
 );
 
+Header.displayName = 'DsDrawer.Header';
+Title.displayName = 'DsDrawer.Title';
+CloseTrigger.displayName = 'DsDrawer.CloseTrigger';
+Toolbar.displayName = 'DsDrawer.Toolbar';
+Body.displayName = 'DsDrawer.Body';
+Footer.displayName = 'DsDrawer.Footer';
+Actions.displayName = 'DsDrawer.Actions';
+
 DsDrawer.Header = Header;
 DsDrawer.Title = Title;
 DsDrawer.CloseTrigger = CloseTrigger;
@@ -159,4 +186,6 @@ DsDrawer.Body = Body;
 DsDrawer.Footer = Footer;
 DsDrawer.Actions = Actions;
 
+DsDrawer.displayName = 'DsDrawer';
+
 export default DsDrawer;

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

@@ -20,6 +20,13 @@ export interface DsDrawerProps extends Pick<DialogProps, 'closeOnEscape' | 'clos
 	 * Callback when the drawer open state changes
 	 */
 	onOpenChange: (open: boolean) => void;
+	/**
+	 * Called when focus is about to move into the drawer as it opens.
+	 * Call `event.preventDefault()` to stop the drawer from stealing focus,
+	 * keeping the caret where it was (e.g. in a text input that triggered the
+	 * drawer). Useful for type-ahead / popover patterns.
+	 */
+	onOpenAutoFocus?: (event: Event) => void;
 	/**
 	 * Number of grid columns the drawer should span (1-12).
 	 * Accepts a responsive value, e.g. `{ lg: 4, md: 6 }`.

package/src/components/ds-drawer/figma/ds-drawer-content.figma.ts

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31470-130498
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Body
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const content = instance.getSlot('Drawer content slot');
+
+export default {
+	example: figma.code`<DsDrawer.Body>${content}</DsDrawer.Body>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	id: 'ds-drawer-content',
+	metadata: { nestable: true },
+};

package/src/components/ds-drawer/figma/ds-drawer-footer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31416-38250
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Footer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+let buttonCode: figma.ResultSection[] | undefined;
+if (button.type === 'INSTANCE') {
+	buttonCode = button.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDrawer.Footer><DsDrawer.Actions>${buttonCode}</DsDrawer.Actions></DsDrawer.Footer>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	id: 'ds-drawer-footer',
+	metadata: { nestable: true },
+};

package/src/components/ds-drawer/figma/ds-drawer-header.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31416-38215
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Header
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('left side', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Drawer title';
+
+export default {
+	example: figma.code`<DsDrawer.Header><DsDrawer.Title>${title}</DsDrawer.Title><DsDrawer.CloseTrigger /></DsDrawer.Header>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	id: 'ds-drawer-header',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31945-54500
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_drawer-in-header_v02', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_drawer-content_v02', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+// The footer instance is named `sheet-footer` inside the assembled drawer but the
+// standalone part is `DAP_drawer-in-footer_v02`; try both so the footer resolves.
+let footer = instance.findInstance('DAP_drawer-in-footer_v02', { traverseInstances: true });
+if (footer.type !== 'INSTANCE') {
+	footer = instance.findInstance('sheet-footer', { traverseInstances: true });
+}
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDrawer open columns={4} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsDrawer>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	id: 'ds-drawer',
+	metadata: { nestable: false },
+};

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -17,7 +17,8 @@
 		display: none;
 	}
 
-	&[data-nested='menu'] {
+	&[data-side='right'],
+	&[data-side='left'] {
 		margin-top: -1px;
 		z-index: 10000;
 	}
@@ -83,12 +84,20 @@
 	bottom: -1px;
 	z-index: 1;
 	display: flex;
+	border-top: 1px solid var(--border-secondary);
+	background-color: var(--background);
+}
+
+.actionsRow {
 	align-items: center;
 	justify-content: flex-end;
 	gap: var(--xs);
 	padding: var(--3xs) var(--xs);
-	border-top: 1px solid var(--border-secondary);
-	background-color: var(--background);
+}
+
+.actionsStretch {
+	flex-direction: column;
+	padding: var(--3xs);
 }
 
 .groupLabel {

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

@@ -35,9 +35,11 @@ interface GroupContextValue {
 
 const GroupContext = createContext<GroupContextValue | null>(null);
 
+const MENU_GUTTER = 4;
+
 const DEFAULT_POSITIONING: DsDropdownMenuPositioning = {
 	placement: 'bottom-start' as const,
-	gutter: 4,
+	gutter: MENU_GUTTER,
 };
 
 /**
@@ -158,15 +160,18 @@ const Header: React.FC<DsDropdownMenuHeaderProps> = ({ children, className, styl
 };
 
 /**
- * Actions component - footer container for action buttons
+ * Actions component - sticky bottom slot for action buttons (`align="end"`) or
+ * full-width elements like a logout item (`align="stretch"`).
  */
-const Actions: React.FC<DsDropdownMenuActionsProps> = ({ children, className, style }) => {
+const Actions: React.FC<DsDropdownMenuActionsProps> = ({ children, align = 'end', className, style }) => {
 	return (
 		<div
-			className={classNames(styles.actions, className)}
+			className={classNames(
+				styles.actions,
+				align === 'stretch' ? styles.actionsStretch : styles.actionsRow,
+				className,
+			)}
 			style={style}
-			role="menu"
-			aria-label="Menu actions"
 		>
 			{children}
 		</div>
@@ -414,3 +419,16 @@ export const DsDropdownMenu = {
 	ItemGroupContent,
 	Separator,
 };
+DsDropdownMenu.Root.displayName = 'DsDropdownMenu.Root';
+DsDropdownMenu.Trigger.displayName = 'DsDropdownMenu.Trigger';
+DsDropdownMenu.Content.displayName = 'DsDropdownMenu.Content';
+DsDropdownMenu.Item.displayName = 'DsDropdownMenu.Item';
+DsDropdownMenu.ItemIndicator.displayName = 'DsDropdownMenu.ItemIndicator';
+DsDropdownMenu.TriggerItem.displayName = 'DsDropdownMenu.TriggerItem';
+DsDropdownMenu.Header.displayName = 'DsDropdownMenu.Header';
+DsDropdownMenu.Actions.displayName = 'DsDropdownMenu.Actions';
+DsDropdownMenu.ItemGroup.displayName = 'DsDropdownMenu.ItemGroup';
+DsDropdownMenu.ItemGroupLabel.displayName = 'DsDropdownMenu.ItemGroupLabel';
+DsDropdownMenu.ItemGroupContent.displayName = 'DsDropdownMenu.ItemGroupContent';
+DsDropdownMenu.Separator.displayName = 'DsDropdownMenu.Separator';
+DsDropdownMenuLegacy.displayName = 'DsDropdownMenuLegacy';

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts

@@ -5,6 +5,9 @@ import type { IconType } from '../ds-icon';
 export const dropdownMenuItemVariants = ['default', 'error'] as const;
 export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
 
+export const dropdownMenuActionsAlignments = ['end', 'stretch'] as const;
+export type DropdownMenuActionsAlign = (typeof dropdownMenuActionsAlignments)[number];
+
 /**
  * Base positioning type
  */
@@ -242,9 +245,15 @@ export interface DsDropdownMenuHeaderProps {
  */
 export interface DsDropdownMenuActionsProps {
 	/**
-	 * The action buttons or elements
+	 * The action buttons or full-width elements pinned to the bottom of the menu.
 	 */
 	children: ReactNode;
+	/**
+	 * How children are laid out. `end` is a right-aligned button row (e.g.
+	 * Cancel/Apply); `stretch` stacks full-width children (e.g. a logout item).
+	 * @default 'end'
+	 */
+	align?: DropdownMenuActionsAlign;
 	/**
 	 * Optional CSS class name
 	 */

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-footer.figma.ts

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35299-7214
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Actions
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Actions>{/* action buttons */}</DsDropdownMenu.Actions>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	id: 'ds-dropdown-menu-footer',
+	metadata: { nestable: true },
+};

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-group.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13761-206276
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.ItemGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const collapsed = instance.getEnum('Type', { Expanded: false, Collapsed: true });
+
+const labelNode = instance.findText('Menu text', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Group name';
+
+const collapsedAttr = collapsed ? ' collapsed' : '';
+
+export default {
+	example: figma.code`<DsDropdownMenu.ItemGroup${collapsedAttr}>
+	<DsDropdownMenu.ItemGroupLabel>${label}</DsDropdownMenu.ItemGroupLabel>
+	<DsDropdownMenu.ItemGroupContent>{/* group items */}</DsDropdownMenu.ItemGroupContent>
+</DsDropdownMenu.ItemGroup>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	id: 'ds-dropdown-menu-group',
+	metadata: { nestable: true },
+};

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-item.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35298-162404
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('type', {
+	default: 'default',
+	checkbox: 'checkbox',
+	radio: 'radio',
+	error: 'error',
+});
+
+const selected = instance.getEnum('selected', { true: true, false: false });
+
+const labelNode = instance.findText('Menu text', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Menu item';
+
+const variantAttr = type === 'error' ? ' variant="error"' : '';
+const selectedAttr = selected ? ' selected' : '';
+const indicator = type === 'checkbox' || type === 'radio' ? '<DsDropdownMenu.ItemIndicator />' : '';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Item value="item"${variantAttr}${selectedAttr}>${label}${indicator}</DsDropdownMenu.Item>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	id: 'ds-dropdown-menu-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-separator.figma.ts

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13683-206080
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Separator
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Separator />`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	id: 'ds-dropdown-menu-separator',
+	metadata: { nestable: true },
+};

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35301-70996
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const items = instance.getSlot('.partsDropdownList');
+
+const footer = instance.findInstance('DAP_dropdown-footer_v01', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDropdownMenu.Root>
+	<DsDropdownMenu.Trigger>{/* trigger element */}</DsDropdownMenu.Trigger>
+	<DsDropdownMenu.Content>${items}${footerCode}</DsDropdownMenu.Content>
+</DsDropdownMenu.Root>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	id: 'ds-dropdown-menu',
+	metadata: { nestable: false },
+};

package/src/components/ds-expandable-text-input/ds-expandable-text-input.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=17353-7836
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-expandable-text-input
+// component=DsExpandableTextInput
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('Type', {
+	Persistent: 'persistent',
+	Expandable: 'expandable',
+});
+
+const isExpandable = type !== 'persistent';
+
+const component = isExpandable ? 'DsExpandableTextInput' : 'DsAutocomplete';
+
+export default {
+	example: isExpandable
+		? figma.code`<DsExpandableTextInput icon="search" />`
+		: figma.code`<DsAutocomplete options={[]} showTrigger={false} />`,
+	imports: [`import { ${component} } from '@drivenets/design-system'`],
+	id: 'ds-expandable-text-input',
+	metadata: { nestable: true },
+};

package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx

@@ -112,3 +112,4 @@ export function DsExpandableTextInput({
 function InputExpander({ children }: { children: ReactNode }) {
 	return <div className={styles.inputExpander}>{children}</div>;
 }
+DsExpandableTextInput.displayName = 'DsExpandableTextInput';

package/src/components/ds-file-upload/ds-file-upload.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15128-184303
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-file-upload
+// component=DsFileUpload
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Error: 'error',
+	Disabled: 'disabled',
+	Focus: 'focus',
+	'Drop Hover': 'dropHover',
+});
+
+const attrs = [
+	'adapter={adapter}',
+	state === 'disabled' ? 'disabled' : '',
+	state === 'error' ? 'errorText="Upload failed"' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsFileUpload ${attrs} />`,
+	imports: ["import { DsFileUpload } from '@drivenets/design-system'"],
+	id: 'ds-file-upload',
+	metadata: { nestable: false },
+};

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

@@ -43,4 +43,6 @@ const DsFileUpload: React.FC<DsFileUploadProps> = ({
 	return <FileUpload {...fileUploadProps} {...props} />;
 };
 
+DsFileUpload.displayName = 'DsFileUpload';
+
 export default DsFileUpload;

package/src/components/ds-file-upload/hooks/use-file-upload.ts

@@ -224,6 +224,13 @@ export function useFileUpload({
 			updateFileProgress(fileId, 100);
 			onFileUploadComplete?.(fileId, result);
 		} catch (error) {
+			// A fired abort signal means the upload was cancelled or removed by the
+			// user. Adapters reject with a (retryable) error on abort, but that must
+			// not overwrite the terminal status owned by cancelUpload/removeFile.
+			if (abortController.signal.aborted) {
+				return;
+			}
+
 			const errorMessage = error instanceof Error ? error.message : 'Upload failed';
 			// Determine status based on error type
 			// Unknown errors are treated as retryable (network errors, etc.)

package/src/components/ds-filter-status-icon/ds-filter-status-icon.figma.ts

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=27983-34074
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-filter-status-icon
+// component=DsFilterStatusIcon
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const status = instance.getEnum('type', {
+	running: 'running',
+	warning: 'warning',
+	failed: 'failed',
+	paused: 'paused',
+});
+const active = instance.getEnum('state', { active: true, 'non-active': false });
+const activeProp = active ? '' : ' active={false}';
+
+export default {
+	example: figma.code`<DsFilterStatusIcon status="${status}"${activeProp} />`,
+	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system'"],
+	id: 'ds-filter-status-icon',
+	metadata: { nestable: true },
+};

package/src/components/ds-filter-status-icon/ds-filter-status-icon.tsx

@@ -33,3 +33,4 @@ export const DsFilterStatusIcon = ({
 		/>
 	);
 };
+DsFilterStatusIcon.displayName = 'DsFilterStatusIcon';

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

@@ -107,4 +107,7 @@ DsFormControl.Textarea = controlify(DsTextarea);
 DsFormControl.Select = controlify(DsSelect);
 DsFormControl.Description = DsFormControlDescription;
 
+DsFormControl.displayName = 'DsFormControl';
+DsFormControl.Description.displayName = 'DsFormControl.Description';
+
 export default DsFormControl;

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

@@ -8,3 +8,6 @@ export const DsGridItem = withResponsiveProps(DsGridItemBase, ['colSpan', 'rowSp
 
 export type DsGridProps = ComponentProps<typeof DsGrid>;
 export type DsGridItemProps = ComponentProps<typeof DsGridItem>;
+
+DsGrid.displayName = 'DsGrid';
+DsGridItem.displayName = 'DsGridItem';

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

@@ -45,4 +45,6 @@ const DsIcon = ({
 	);
 };
 
+DsIcon.displayName = 'DsIcon';
+
 export default DsIcon;

package/src/components/ds-key-value-pair/ds-key-value-pair.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=28373-92227
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-key-value-pair
+// component=DsKeyValuePair
+//
+// `Direction` maps to `orientation`. `keyLabel` and `value` are content, not derivable
+// from Figma, so they are emitted as placeholders for the developer to fill in (see
+// `ds-user-card.figma.ts`). Read-only vs editable is consumer edit-mode state rather than
+// a Figma variant, so `readOnly`/`editInput` are left at their defaults.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('Direction', {
+		vertical: 'vertical',
+		horizontal: 'horizontal',
+	}) ?? 'vertical';
+
+export default {
+	example: figma.code`<DsKeyValuePair keyLabel="Label" value="Value" orientation="${orientation}" />`,
+	imports: ["import { DsKeyValuePair } from '@drivenets/design-system'"],
+	id: 'ds-key-value-pair',
+	metadata: { nestable: true },
+};

package/src/components/ds-key-value-pair/ds-key-value-pair.tsx

@@ -44,4 +44,6 @@ const DsKeyValuePair = ({
 	);
 };
 
+DsKeyValuePair.displayName = 'DsKeyValuePair';
+
 export default DsKeyValuePair;