@drivenets/design-system 0.15.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.tsx

@@ -170,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;
@@ -178,4 +186,6 @@ DsDrawer.Body = Body;
 DsDrawer.Footer = Footer;
 DsDrawer.Actions = Actions;
 
+DsDrawer.displayName = 'DsDrawer';
+
 export default DsDrawer;

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

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

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

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

@@ -15,4 +15,6 @@ const DsLoader = ({ variant = 'spinner', className, ...props }: DsLoaderProps) =
 	);
 };
 
+DsLoader.displayName = 'DsLoader';
+
 export default DsLoader;

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

@@ -138,6 +138,13 @@ const Actions = ({
 	</div>
 );
 
+Header.displayName = 'DsModal.Header';
+Title.displayName = 'DsModal.Title';
+CloseTrigger.displayName = 'DsModal.CloseTrigger';
+Body.displayName = 'DsModal.Body';
+Footer.displayName = 'DsModal.Footer';
+Actions.displayName = 'DsModal.Actions';
+
 DsModal.Header = Header;
 DsModal.Title = Title;
 DsModal.CloseTrigger = CloseTrigger;
@@ -145,4 +152,6 @@ DsModal.Body = Body;
 DsModal.Footer = Footer;
 DsModal.Actions = Actions;
 
+DsModal.displayName = 'DsModal';
+
 export default DsModal;

package/src/components/ds-number-input/ds-number-input.tsx

@@ -71,4 +71,6 @@ const DsNumberInput: FC<DsNumberInputProps> = ({
 	);
 };
 
+DsNumberInput.displayName = 'DsNumberInput';
+
 export default DsNumberInput;

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

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15978-26200
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-panel
+// component=DsPanel
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const open = instance.getEnum('type', { expanded: true, collapsed: false });
+const openAttr = open ? 'open' : 'open={false}';
+
+export default {
+	example: figma.code`<DsPanel ${openAttr}>{/* panel content */}</DsPanel>`,
+	imports: ["import { DsPanel } from '@drivenets/design-system'"],
+	id: 'ds-panel',
+	metadata: { nestable: false },
+};

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

@@ -3,3 +3,5 @@ import { DsPanelBase } from './ds-panel';
 
 export const DsPanel = withResponsiveProps(DsPanelBase, ['width']);
 export type { DsPanelProps, DsPanelVariant, DsPanelCollapseButtonProps } from './ds-panel.types';
+
+DsPanel.displayName = 'DsPanel';

package/src/components/ds-password-input/ds-password-input.tsx

@@ -64,4 +64,6 @@ const DsPasswordInput: FC<DsPasswordInputProps> = ({
 	);
 };
 
+DsPasswordInput.displayName = 'DsPasswordInput';
+
 export default DsPasswordInput;