@drivenets/design-system 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -41,15 +41,14 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-tooltip": "^1.2.9",
-    "@radix-ui/react-visually-hidden": "^1.2.5",
+    "@radix-ui/react-collapsible": "^1.1.17",
+    "@radix-ui/react-dialog": "^1.1.20",
+    "@radix-ui/react-dropdown-menu": "^2.1.21",
+    "@radix-ui/react-visually-hidden": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.2",
-    "@zag-js/react": "^1.41.2",
-    "@zag-js/steps": "^1.41.2",
+    "@tanstack/react-virtual": "^3.14.6",
+    "@zag-js/react": "^1.42.0",
+    "@zag-js/steps": "^1.42.0",
     "classnames": "^2.5.1",
     "csstype": "^3.2.3"
   },
@@ -62,51 +61,53 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@eslint/compat": "^2.1.0",
-    "@faker-js/faker": "^10.3.0",
-    "@figma/code-connect": "^1.4.8",
+    "@faker-js/faker": "^10.5.0",
+    "@figma/code-connect": "^1.4.9",
     "@github-ui/storybook-addon-performance-panel": "^1.1.4",
-    "@hookform/resolvers": "^5.4.0",
+    "@hookform/resolvers": "^5.4.2",
     "@rolldown/plugin-babel": "^0.2.3",
     "@storybook/addon-a11y": "^10.4.1",
     "@storybook/addon-docs": "^10.4.1",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
-    "@tanstack/react-query": "^5.100.14",
-    "@tanstack/react-router": "^1.170.8",
-    "@tsdown/css": "^0.22.0",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-router": "^1.170.18",
+    "@tsdown/css": "^0.22.14",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260521.1",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser-playwright": "^4.1.7",
-    "@vitest/coverage-v8": "^4.1.7",
+    "@types/serve-handler": "^6.1.4",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.1",
+    "eslint-plugin-storybook": "^10.5.0",
     "mockdate": "^3.0.5",
-    "playwright": "^1.60.0",
-    "publint": "^0.3.21",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-hook-form": "^7.76.1",
+    "playwright": "^1.62.0",
+    "publint": "^0.3.22",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-hook-form": "^7.83.0",
     "remark-gfm": "^4.0.1",
     "sass-embedded": "^1.100.0",
+    "serve-handler": "^6.1.7",
     "storybook": "^10.4.1",
-    "tsdown": "^0.22.0",
+    "tsdown": "^0.22.14",
     "typed-scss-modules": "^8.1.1",
-    "typescript": "^6.0.3",
+    "typescript": "npm:@typescript/typescript6",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "8.0.14",
-    "vitest": "^4.1.7",
+    "vite": "8.1.5",
+    "vitest": "^4.1.10",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
-    "@drivenets/vite-plugin-design-system": "0.0.10",
-    "@drivenets/eslint-plugin-internal": "0.0.0"
+    "@drivenets/eslint-plugin-internal": "0.0.0",
+    "@drivenets/vite-plugin-design-system": "0.0.10"
   },
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -115,15 +116,16 @@
     "//": "ESLINT_ARGS is used to pass arguments to eslint. We're using it so we don't need to duplicate the lint script.",
     "lint:fix": "ESLINT_ARGS=--fix pnpm lint",
     "lint:build": "publint && attw --pack",
-    "typecheck": "pnpm generate-scss-dts && tsgo; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
+    "typecheck": "pnpm generate-scss-dts && tsc; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "figma:lint": "figma connect parse --exit-on-unreadable-files",
     "figma:publish": "figma connect publish --exit-on-unreadable-files",
-    "test": "vitest --project=\"!requires-build\"",
+    "test": "vitest --project=unit --project=browser --project=storybook",
     "test:coverage": "pnpm test --coverage",
     "test:unit": "vitest --project=unit",
     "test:browser": "vitest --project=browser",
     "test:requires-build": "vitest --project=requires-build",
+    "test:storybook-docs": "vitest --project=storybook-docs",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",
     "build:storybook": "storybook build"

package/src/components/ds-alert-banner/ds-alert-banner.tsx

@@ -6,10 +6,13 @@ import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
 
 /**
- * Design system AlertBanner component
- * Controlled component that displays alert messages with different variants
+ * @summary Controlled banner for surfacing contextual status messages.
+ *
+ * Renders as an inline bordered card or a full-width global bar, with five
+ * severity variants, an optional icon, and an optional close button. Compose the
+ * content with `DsAlertBanner.Title`, `DsAlertBanner.Body`, and `DsAlertBanner.Actions`.
  */
-const DsAlertBanner = ({
+const DsAlertBannerRoot = ({
 	open,
 	onOpenChange,
 	inline = false,
@@ -108,8 +111,15 @@ const Actions = ({
 	</div>
 );
 
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
+Title.displayName = 'DsAlertBanner.Title';
+Body.displayName = 'DsAlertBanner.Body';
+Actions.displayName = 'DsAlertBanner.Actions';
+
+const DsAlertBanner = Object.assign(DsAlertBannerRoot, {
+	displayName: 'DsAlertBanner',
+	Title,
+	Body,
+	Actions,
+});
 
 export default DsAlertBanner;

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14824-7324
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-autocomplete
+// component=DsAutocomplete
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Disable: 'disable',
+	Error: 'error',
+	'read only': 'readOnly',
+});
+
+const comboBox = instance.getEnum('Combo box', {
+	ON: 'on',
+	OFF: 'off',
+});
+
+const attrs = [
+	'options={[]}',
+	comboBox === 'off' ? 'showTrigger={false}' : '',
+	state === 'disable' ? 'disabled' : '',
+	state === 'error' ? 'invalid' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsAutocomplete ${attrs} />`,
+	imports: ["import { DsAutocomplete } from '@drivenets/design-system';"],
+	id: 'ds-autocomplete',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -140,3 +140,5 @@ export const DsAutocomplete = ({
 		</Combobox.Root>
 	);
 };
+
+DsAutocomplete.displayName = 'DsAutocomplete';

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

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14860-11893
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-avatar
+// component=DsAvatar
+//
+// `Size` and `Type` map to the code props. Figma's boolean `Placeholder` variant has no
+// code equivalent — initials-vs-photo is automatic (required `name` drives initials, an
+// optional `src` drives the photo) — so it is ignored. `name` is content, not derivable
+// from Figma, so it is emitted as a placeholder (see `ds-user-card.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size =
+	instance.getEnum('Size', {
+		'XSM - 18': 'xsm',
+		'SM - 24': 'sm',
+		'Regular - 32': 'regular',
+		'MD - 48': 'md',
+		'LG - 80': 'lg',
+		'XL - 144': 'xl',
+	}) ?? 'regular';
+
+const type = instance.getEnum('Type', { Circle: 'circle', Rounded: 'rounded' }) ?? 'circle';
+
+export default {
+	example: figma.code`<DsAvatar name="Full Name" size="${size}" type="${type}" />`,
+	imports: ["import { DsAvatar } from '@drivenets/design-system';"],
+	id: 'ds-avatar',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -6,7 +6,11 @@ import type { DsAvatarProps } from './ds-avatar.types';
 import { DsTooltip } from '../ds-tooltip';
 
 /**
- * DsAvatar component for displaying user profile pictures or initials
+ * @summary Displays a user's profile picture, falling back to initials.
+ *
+ * Renders a circular or rounded avatar from an image `src`. When the image is
+ * missing or fails to load, the trimmed initials derived from `name` are shown
+ * instead, and `name` is surfaced in a tooltip on hover.
  */
 export const DsAvatar: FC<DsAvatarProps> = ({
 	src,
@@ -40,3 +44,4 @@ export const DsAvatar: FC<DsAvatarProps> = ({
 		</DsTooltip>
 	);
 };
+DsAvatar.displayName = 'DsAvatar';

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

@@ -1,7 +1,10 @@
 import type { CSSProperties } from 'react';
 
-export type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
-export type DsAvatarType = 'circle' | 'rounded';
+export const dsAvatarSizes = ['xsm', 'sm', 'regular', 'md', 'lg', 'xl'] as const;
+export const dsAvatarTypes = ['circle', 'rounded'] as const;
+
+export type DsAvatarSize = (typeof dsAvatarSizes)[number];
+export type DsAvatarType = (typeof dsAvatarTypes)[number];
 
 export interface DsAvatarProps {
 	/**

package/src/components/ds-avatar-group/ds-avatar-group.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14870-20161
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-avatar-group
+// component=DsAvatarGroup
+//
+// `Size` maps to the code prop (note the key is `XS - 18`, unlike `ds-avatar`'s `XSM - 18`).
+// `avatars` is a required data array, not derivable from Figma, so it is emitted as an empty
+// placeholder for the developer to fill in (see `ds-select.figma.ts`). The Figma set only
+// models `type=circle` (code also supports `rounded`) and does not expose `max`, so neither
+// is mapped.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size =
+	instance.getEnum('Size', {
+		'XS - 18': 'xsm',
+		'SM - 24': 'sm',
+		'Regular - 32': 'regular',
+		'MD - 48': 'md',
+	}) ?? 'regular';
+
+export default {
+	example: figma.code`<DsAvatarGroup avatars={[]} size="${size}" />`,
+	imports: ["import { DsAvatarGroup } from '@drivenets/design-system';"],
+	id: 'ds-avatar-group',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-avatar-group/ds-avatar-group.tsx

@@ -7,7 +7,11 @@ import { DsTooltip } from '../ds-tooltip';
 import { DsTypography } from '../ds-typography';
 
 /**
- * DsAvatarGroup component for displaying a list of avatars with overlap
+ * @summary Overlapping avatars with overflow collapse and tooltip.
+ *
+ * Renders a row of {@link DsAvatar} members that share `size` and `type`. When
+ * `avatars.length` exceeds `max`, the remainder collapse behind a `+N`
+ * indicator; hovering it lists the hidden names in a tooltip.
  */
 export const DsAvatarGroup: FC<DsAvatarGroupProps> = ({
 	avatars,
@@ -49,3 +53,4 @@ export const DsAvatarGroup: FC<DsAvatarGroupProps> = ({
 		</div>
 	);
 };
+DsAvatarGroup.displayName = 'DsAvatarGroup';

package/src/components/ds-avatar-group/ds-avatar-group.types.ts

@@ -2,7 +2,9 @@ import type { DsAvatarProps, DsAvatarSize, DsAvatarType } from '../ds-avatar';
 
 export interface DsAvatarGroupProps {
 	/**
-	 * Array of avatar items
+	 * Avatar items to display. Each item accepts `DsAvatar` props except `size`
+	 * and `type`, which are set on the group. `name` is required; `src` and `alt`
+	 * are optional — without `src`, initials are shown per `DsAvatar`.
 	 */
 	avatars: Omit<DsAvatarProps, 'size' | 'type'>[];
 	/**

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15015-2480
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-breadcrumb
+// component=DsBreadcrumb
+//
+// `DAP_Breadcrumbs-nav_v01` maps to `DsBreadcrumb`. Its `steps`/`icons`/`back` variants do
+// not map to props: the trail is built from a single `items` array (Figma's fixed
+// `steps=1..7` variants only exist because a component can't repeat an array), the per-item
+// icon lives in each `items` entry, and there is no back-navigation feature in code. `items`
+// is required data, so it is emitted as an empty placeholder (see `ds-select.figma.ts`). The
+// single-crumb atom `DAP_Breadcrumbs-item_v01` has no public export and is intentionally not
+// connected.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsBreadcrumb items={[]} />`,
+	imports: ["import { DsBreadcrumb } from '@drivenets/design-system';"],
+	id: 'ds-breadcrumb',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -91,4 +91,6 @@ const DsBreadcrumb: React.FC<DsBreadcrumbProps> = ({ items, onSelect, className
 	);
 };
 
+DsBreadcrumb.displayName = 'DsBreadcrumb';
+
 export default DsBreadcrumb;

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

@@ -9,4 +9,6 @@ const DsButton = (props: DsButtonUnifiedProps) => {
 	return <DsButtonLegacy {...props} />;
 };
 
+DsButton.displayName = 'DsButton';
+
 export default DsButton;

package/src/components/ds-button-v3/ds-button-v3.figma.ts

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 const instance = figma.selectedInstance;
 
-const variant = instance.getEnum('Variant', {
+const variant = instance.getEnum('buttonType', {
 	primary: 'primary',
 	secondary: 'secondary',
 	tertiary: 'tertiary',
@@ -93,7 +93,7 @@ export default {
 		: showIcon && icon
 			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''} icon="${icon}">${label}</DsButtonV3>`
 			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}>${label}</DsButtonV3>`,
-	imports: ["import { DsButtonV3 } from '@drivenets/design-system'"],
+	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
 	id: 'ds-button-v3',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-button-v3/ds-button-v3.tsx

@@ -11,6 +11,12 @@ const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
 	tiny: 'tiny',
 });
 
+/**
+ * Button for user-triggered actions that do not navigate to another route.
+ * Supports color palettes, emphasis variants, sizes, icon-only layout, loading and selected states.
+ *
+ * @summary action button with color/variant/size, icon-only, loading and selected states
+ */
 const DsButtonV3 = ({
 	ref,
 	className,

package/src/components/ds-button-v3/index.ts

@@ -3,4 +3,6 @@ import DsButtonV3Base from './ds-button-v3';
 
 export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']);
 
+DsButtonV3.displayName = 'DsButtonV3';
+
 export * from './ds-button-v3.types';

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

@@ -51,9 +51,8 @@ const Root = ({
 };
 
 /**
- * Card header - contains title and extra content.
- * Use with DsCard.Title and DsCard.Extra for standard layout,
- * or provide custom children for full flexibility.
+ * Card header — title row and optional trailing content.
+ * Provide custom children for full layout flexibility.
  */
 const Header = ({ className, children, ref, ...rest }: DsCardHeaderProps) => (
 	<div ref={ref} className={classNames(styles.header, className)} {...rest}>
@@ -79,6 +78,11 @@ const Footer = ({ className, children, ref, ...rest }: DsCardFooterProps) => (
 	</div>
 );
 
+Root.displayName = 'DsCard.Root';
+Header.displayName = 'DsCard.Header';
+Body.displayName = 'DsCard.Body';
+Footer.displayName = 'DsCard.Footer';
+
 export const DsCard = {
 	Root,
 	Header,

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

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Body>Card content</DsCard.Body>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Footer>Card footer</DsCard.Footer>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -9,7 +9,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsCard.Header>Card title</DsCard.Header>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -66,7 +66,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsCard.Root size="${size}"${flagsAttr}>${headerCode}${contentCode}${footerCode}</DsCard.Root>`,
-	imports: ["import { DsCard } from '@drivenets/design-system'"],
+	imports: ["import { DsCard } from '@drivenets/design-system';"],
 	id: 'ds-card',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-catalog-layout/ds-catalog-layout.figma.ts

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=38148-43478
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-catalog-layout
+// component=DsCatalogLayout
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type =
+	instance.getEnum('Type', {
+		empty: 'empty',
+		'collapsed side menu': 'collapsed',
+		'hover to expand side menu': 'hover',
+		'pin expanded side menu': 'pinned',
+	}) ?? 'empty';
+
+const hasSideMenu = type !== 'empty';
+const pinnedAttr = type === 'pinned' ? 'pinned' : 'pinned={false}';
+
+const sideMenu = hasSideMenu
+	? figma.code`
+		<DsCatalogLayout.SideMenu ${pinnedAttr} onPinnedChange={() => {}}>
+			{/* DsTree / DsSideMenu navigation items */}
+		</DsCatalogLayout.SideMenu>`
+	: '';
+
+const contentHeader =
+	type === 'empty'
+		? figma.code`<DsCatalogLayout.ContentHeader title={<DsTypography variant="heading3">Title</DsTypography>} />`
+		: figma.code`<DsCatalogLayout.ContentHeader title={<DsTypography variant="heading3">Title</DsTypography>}>
+				{/* DsSmartTabs */}
+			</DsCatalogLayout.ContentHeader>`;
+
+const contentBody =
+	type === 'empty'
+		? '{/* EmptyStateCard + DsButtonV3 (no data / clear filters) */}'
+		: '{/* DsTable with data rows */}';
+
+export default {
+	example: figma.code`<DsCatalogLayout>
+	<DsCatalogLayout.Header>{/* DsTopBarNavigation */}</DsCatalogLayout.Header>
+	<DsCatalogLayout.Body>${sideMenu}
+		<DsCatalogLayout.Content>
+			${contentHeader}
+			${contentBody}
+		</DsCatalogLayout.Content>
+	</DsCatalogLayout.Body>
+</DsCatalogLayout>`,
+	imports: ["import { DsCatalogLayout, DsTypography } from '@drivenets/design-system';"],
+	id: 'ds-catalog-layout',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-catalog-layout/ds-catalog-layout.tsx

@@ -17,7 +17,7 @@ const DEFAULT_LOCALE = Object.freeze({
 	unpinButtonLabel: 'Unpin side menu',
 });
 
-const DsCatalogLayout = ({ className, fillParent = false, ...rest }: DsCatalogLayoutProps) => {
+const DsCatalogLayoutRoot = ({ className, fillParent = false, ...rest }: DsCatalogLayoutProps) => {
 	const [hasSideMenu, setHasSideMenu] = useState(false);
 
 	const registerSideMenu = useCallback(() => setHasSideMenu(true), []);
@@ -121,10 +121,19 @@ const ContentHeader = ({
 	</div>
 );
 
-DsCatalogLayout.Header = Header;
-DsCatalogLayout.Body = Body;
-DsCatalogLayout.SideMenu = SideMenu;
-DsCatalogLayout.Content = Content;
-DsCatalogLayout.ContentHeader = ContentHeader;
+Header.displayName = 'DsCatalogLayout.Header';
+Body.displayName = 'DsCatalogLayout.Body';
+SideMenu.displayName = 'DsCatalogLayout.SideMenu';
+Content.displayName = 'DsCatalogLayout.Content';
+ContentHeader.displayName = 'DsCatalogLayout.ContentHeader';
+
+const DsCatalogLayout = Object.assign(DsCatalogLayoutRoot, {
+	displayName: 'DsCatalogLayout',
+	Header,
+	Body,
+	SideMenu,
+	Content,
+	ContentHeader,
+});
 
 export default DsCatalogLayout;

package/src/components/ds-checkbox/ds-checkbox-level-2.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34856-101385
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox
+// component=DsCheckbox
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const inner = instance.findInstance('DAP_checkbox_v03', { traverseInstances: true });
+
+const color =
+	inner.type === 'INSTANCE' ? inner.getEnum('color', { Default: 'default', warning: 'warning' }) : 'default';
+
+const checked =
+	inner.type === 'INSTANCE'
+		? inner.getEnum('checked', { unchecked: 'unchecked', checked: 'checked', partial: 'partial' })
+		: 'unchecked';
+
+const state =
+	inner.type === 'INSTANCE'
+		? inner.getEnum('state', { default: 'default', hover: 'hover', focus: 'focus', disabled: 'disabled' })
+		: 'default';
+
+const checkedAttr =
+	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
+
+const attrs = [
+	'label="Label"',
+	color === 'warning' ? 'variant="warning"' : '',
+	checkedAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsCheckbox ${attrs} />`,
+	imports: ["import { DsCheckbox } from '@drivenets/design-system';"],
+	id: 'ds-checkbox-level-2',
+	metadata: { nestable: true },
+} satisfies figma.Template;