@drivenets/design-system 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -41,14 +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-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"
   },
@@ -61,25 +61,25 @@
   "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.12",
+    "@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",
     "@types/serve-handler": "^6.1.4",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "@vitejs/plugin-react": "^6.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",
@@ -87,22 +87,22 @@
     "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.12",
+    "tsdown": "^0.22.14",
     "typed-scss-modules": "^8.1.1",
     "typescript": "npm:@typescript/typescript6",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "8.0.14",
+    "vite": "8.1.5",
     "vitest": "^4.1.10",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",

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

@@ -12,7 +12,7 @@ import { DsTypography } from '../ds-typography';
  * 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,
@@ -115,10 +115,11 @@ Title.displayName = 'DsAlertBanner.Title';
 Body.displayName = 'DsAlertBanner.Body';
 Actions.displayName = 'DsAlertBanner.Actions';
 
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
-
-DsAlertBanner.displayName = 'DsAlertBanner';
+const DsAlertBanner = Object.assign(DsAlertBannerRoot, {
+	displayName: 'DsAlertBanner',
+	Title,
+	Body,
+	Actions,
+});
 
 export default DsAlertBanner;

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

@@ -30,7 +30,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsAutocomplete ${attrs} />`,
-	imports: ["import { DsAutocomplete } from '@drivenets/design-system'"],
+	imports: ["import { DsAutocomplete } from '@drivenets/design-system';"],
 	id: 'ds-autocomplete',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -24,7 +24,7 @@ const type = instance.getEnum('Type', { Circle: 'circle', Rounded: 'rounded' })
 
 export default {
 	example: figma.code`<DsAvatar name="Full Name" size="${size}" type="${type}" />`,
-	imports: ["import { DsAvatar } from '@drivenets/design-system'"],
+	imports: ["import { DsAvatar } from '@drivenets/design-system';"],
 	id: 'ds-avatar',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -21,7 +21,7 @@ const size =
 
 export default {
 	example: figma.code`<DsAvatarGroup avatars={[]} size="${size}" />`,
-	imports: ["import { DsAvatarGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsAvatarGroup } from '@drivenets/design-system';"],
 	id: 'ds-avatar-group',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsBreadcrumb items={[]} />`,
-	imports: ["import { DsBreadcrumb } from '@drivenets/design-system'"],
+	imports: ["import { DsBreadcrumb } from '@drivenets/design-system';"],
 	id: 'ds-breadcrumb',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -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-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), []);
@@ -127,12 +127,13 @@ SideMenu.displayName = 'DsCatalogLayout.SideMenu';
 Content.displayName = 'DsCatalogLayout.Content';
 ContentHeader.displayName = 'DsCatalogLayout.ContentHeader';
 
-DsCatalogLayout.Header = Header;
-DsCatalogLayout.Body = Body;
-DsCatalogLayout.SideMenu = SideMenu;
-DsCatalogLayout.Content = Content;
-DsCatalogLayout.ContentHeader = ContentHeader;
-
-DsCatalogLayout.displayName = 'DsCatalogLayout';
+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

@@ -34,7 +34,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsCheckbox ${attrs} />`,
-	imports: ["import { DsCheckbox } from '@drivenets/design-system'"],
+	imports: ["import { DsCheckbox } from '@drivenets/design-system';"],
 	id: 'ds-checkbox-level-2',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -39,7 +39,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsCheckbox ${attrs} />`,
-	imports: ["import { DsCheckbox } from '@drivenets/design-system'"],
+	imports: ["import { DsCheckbox } from '@drivenets/design-system';"],
 	id: 'ds-checkbox',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -9,7 +9,7 @@ const checkboxes = instance.getSlot('checkboxes slot');
 
 export default {
 	example: figma.code`<DsCheckboxGroup>${checkboxes}</DsCheckboxGroup>`,
-	imports: ["import { DsCheckboxGroup, DsCheckbox } from '@drivenets/design-system'"],
+	imports: ["import { DsCheckboxGroup, DsCheckbox } from '@drivenets/design-system';"],
 	id: 'ds-checkbox-group',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-comments-drawer/components/comments-filter-modal/index.ts

@@ -1,2 +1 @@
 export { CommentsFilterModal } from './comments-filter-modal';
-export type { CommentsFilterModalProps } from './comments-filter-modal.types';

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

@@ -1,18 +1,20 @@
 import { DsModal } from '../ds-modal';
 import type { DsConfirmationProps } from './ds-confirmation.types';
 
+const DsConfirmationRoot = (props: DsConfirmationProps) => (
+	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
+);
+
 /**
  * @deprecated DsConfirmation is deprecated. Use DsModal instead.
  * @see {@link ../ds-modal} for the replacement component.
  */
-export const DsConfirmation = (props: DsConfirmationProps) => (
-	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
-);
-
-DsConfirmation.Header = DsModal.Header;
-DsConfirmation.Title = DsModal.Title;
-DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
-DsConfirmation.Body = DsModal.Body;
-DsConfirmation.Footer = DsModal.Footer;
-DsConfirmation.Actions = DsModal.Actions;
-DsConfirmation.displayName = 'DsConfirmation';
+export const DsConfirmation = Object.assign(DsConfirmationRoot, {
+	displayName: 'DsConfirmation',
+	Header: DsModal.Header,
+	Title: DsModal.Title,
+	CloseTrigger: DsModal.CloseTrigger,
+	Body: DsModal.Body,
+	Footer: DsModal.Footer,
+	Actions: DsModal.Actions,
+});

package/src/components/ds-date-picker/ds-date-picker.figma.ts

@@ -13,7 +13,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsDatePicker value={value} onChange={setValue} withTime placeholder="mm/dd/yyyy, hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsDatePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsDatePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-date-picker',
 	metadata: { nestable: true, props: { fcMember: 'DatePicker', fcProps: '' } },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ const orientation =
 
 export default {
 	example: figma.code`<DsDivider orientation="${orientation}" />`,
-	imports: ["import { DsDivider } from '@drivenets/design-system'"],
+	imports: ["import { DsDivider } from '@drivenets/design-system';"],
 	id: 'ds-divider',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -9,7 +9,7 @@ import { DsTypography } from '../ds-typography';
 import { useArkDialogBodyLockCleanup } from '../../utils/use-ark-dialog-body-lock-cleanup';
 import { useResponsiveValue } from '../../utils/responsive';
 
-const DsDrawer = ({
+const DsDrawerRoot = ({
 	open,
 	onOpenChange,
 	onOpenAutoFocus,
@@ -178,14 +178,15 @@ Body.displayName = 'DsDrawer.Body';
 Footer.displayName = 'DsDrawer.Footer';
 Actions.displayName = 'DsDrawer.Actions';
 
-DsDrawer.Header = Header;
-DsDrawer.Title = Title;
-DsDrawer.CloseTrigger = CloseTrigger;
-DsDrawer.Toolbar = Toolbar;
-DsDrawer.Body = Body;
-DsDrawer.Footer = Footer;
-DsDrawer.Actions = Actions;
-
-DsDrawer.displayName = 'DsDrawer';
+const DsDrawer = Object.assign(DsDrawerRoot, {
+	displayName: 'DsDrawer',
+	Header,
+	Title,
+	CloseTrigger,
+	Toolbar,
+	Body,
+	Footer,
+	Actions,
+});
 
 export default DsDrawer;

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

@@ -9,7 +9,7 @@ const content = instance.getSlot('Drawer content slot');
 
 export default {
 	example: figma.code`<DsDrawer.Body>${content}</DsDrawer.Body>`,
-	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
 	id: 'ds-drawer-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ if (button.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsDrawer.Footer><DsDrawer.Actions>${buttonCode}</DsDrawer.Actions></DsDrawer.Footer>`,
-	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
 	id: 'ds-drawer-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -10,7 +10,7 @@ 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'"],
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
 	id: 'ds-drawer-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -30,7 +30,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsDrawer open columns={4} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsDrawer>`,
-	imports: ["import { DsDrawer } from '@drivenets/design-system'"],
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
 	id: 'ds-drawer',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsDropdownMenu.Actions>{/* action buttons */}</DsDropdownMenu.Actions>`,
-	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
 	id: 'ds-dropdown-menu-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -17,7 +17,7 @@ export default {
 	<DsDropdownMenu.ItemGroupLabel>${label}</DsDropdownMenu.ItemGroupLabel>
 	<DsDropdownMenu.ItemGroupContent>{/* group items */}</DsDropdownMenu.ItemGroupContent>
 </DsDropdownMenu.ItemGroup>`,
-	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
 	id: 'ds-dropdown-menu-group',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -23,7 +23,7 @@ const indicator = type === 'checkbox' || type === 'radio' ? '<DsDropdownMenu.Ite
 
 export default {
 	example: figma.code`<DsDropdownMenu.Item value="item"${variantAttr}${selectedAttr}>${label}${indicator}</DsDropdownMenu.Item>`,
-	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
 	id: 'ds-dropdown-menu-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsDropdownMenu.Separator />`,
-	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
 	id: 'ds-dropdown-menu-separator',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -18,7 +18,7 @@ export default {
 	<DsDropdownMenu.Trigger>{/* trigger element */}</DsDropdownMenu.Trigger>
 	<DsDropdownMenu.Content>${items}${footerCode}</DsDropdownMenu.Content>
 </DsDropdownMenu.Root>`,
-	imports: ["import { DsDropdownMenu } from '@drivenets/design-system'"],
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
 	id: 'ds-dropdown-menu',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -18,7 +18,7 @@ export default {
 	example: isExpandable
 		? figma.code`<DsExpandableTextInput icon="search" />`
 		: figma.code`<DsAutocomplete options={[]} showTrigger={false} />`,
-	imports: [`import { ${component} } from '@drivenets/design-system'`],
+	imports: [`import { ${component} } from '@drivenets/design-system';`],
 	id: 'ds-expandable-text-input',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-file-upload/components/file-upload-item/index.ts

@@ -1,2 +1 @@
 export { FileUploadItem } from './file-upload-item';
-export type { FileUploadItemProps } from './file-upload-item.types';

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

@@ -23,7 +23,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsFileUpload ${attrs} />`,
-	imports: ["import { DsFileUpload } from '@drivenets/design-system'"],
+	imports: ["import { DsFileUpload } from '@drivenets/design-system';"],
 	id: 'ds-file-upload',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -16,7 +16,7 @@ const activeProp = active ? '' : ' active={false}';
 
 export default {
 	example: figma.code`<DsFilterStatusIcon status="${status}"${activeProp} />`,
-	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system';"],
 	id: 'ds-filter-status-icon',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-form-control/ds-form-control.figma.ts

@@ -70,7 +70,7 @@ const formControlAttrs = [labelAttr, requiredAttr, hideLabelAttr, statusAttr, me
 
 export default {
 	example: figma.code`<DsFormControl ${formControlAttrs}>${description}${child}</DsFormControl>`,
-	imports: ["import { DsFormControl } from '@drivenets/design-system'"],
+	imports: ["import { DsFormControl } from '@drivenets/design-system';"],
 	id: 'ds-form-control',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -41,7 +41,7 @@ const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ chi
 	return <div className={classNames(styles.description, className)}>{children}</div>;
 };
 
-const DsFormControl = ({
+const DsFormControlRoot = ({
 	id,
 	status,
 	label,
@@ -96,18 +96,20 @@ const DsFormControl = ({
 	);
 };
 
-DsFormControl.TextInput = controlify(DsTextInput);
-DsFormControl.NumberInput = controlify(DsNumberInput);
-DsFormControl.PasswordInput = controlify(DsPasswordInput);
-/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
-DsFormControl.DateInput = controlify(DsDateInput);
-DsFormControl.DatePicker = controlify(DsDatePicker);
-DsFormControl.TimePicker = controlify(DsTimePicker);
-DsFormControl.Textarea = controlify(DsTextarea);
-DsFormControl.Select = controlify(DsSelect);
-DsFormControl.Description = DsFormControlDescription;
+DsFormControlDescription.displayName = 'DsFormControl.Description';
 
-DsFormControl.displayName = 'DsFormControl';
-DsFormControl.Description.displayName = 'DsFormControl.Description';
+const DsFormControl = Object.assign(DsFormControlRoot, {
+	displayName: 'DsFormControl',
+	TextInput: controlify(DsTextInput),
+	NumberInput: controlify(DsNumberInput),
+	PasswordInput: controlify(DsPasswordInput),
+	/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
+	DateInput: controlify(DsDateInput),
+	DatePicker: controlify(DsDatePicker),
+	TimePicker: controlify(DsTimePicker),
+	Textarea: controlify(DsTextarea),
+	Select: controlify(DsSelect),
+	Description: DsFormControlDescription,
+});
 
 export default DsFormControl;

package/src/components/ds-icon/figma/ds-icon-material.figma.batch.ts

@@ -4,7 +4,7 @@ const batch = figma.batch as { icon: string; filled: boolean; id: string };
 
 export default {
 	example: figma.code`<DsIcon icon="${batch.icon}"${batch.filled ? ' filled' : ''} />`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon: batch.icon } },
 };