@drivenets/design-system 0.16.0 → 0.18.0

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

@@ -0,0 +1,121 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39666-40247
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-button-v3
+// component=DsButtonV3
+import figma from 'figma';
+
+// Figma ships several button generations; the `DsButtonV4` component set maps onto the
+// same code component as `DsButtonV3` (see ds-button-v3.figma.ts for the older set).
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('variant', {
+	primary: 'primary',
+	'primary-subtle': 'primary-subtle',
+	secondary: 'secondary',
+	tertiary: 'tertiary',
+});
+const color = instance.getEnum('color', {
+	default: 'default',
+	error: 'error',
+	light: 'light',
+});
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	active: 'active',
+	disabled: 'disabled',
+	isLoading: 'isLoading',
+});
+
+const disabled = state === 'disabled';
+const loading = state === 'isLoading';
+
+const structure = instance.findInstance('Part_ButtonStructureV2', { traverseInstances: true });
+
+const size =
+	structure.type === 'INSTANCE'
+		? (structure.getEnum('size', {
+				large: 'large',
+				medium: 'medium',
+				small: 'small',
+				tiny: 'tiny',
+			}) ?? 'medium')
+		: 'medium';
+
+const iconOnly =
+	structure.type === 'INSTANCE' ? structure.getEnum('icon-only', { True: true, False: false }) : false;
+
+const highEmphasis =
+	structure.type === 'INSTANCE' ? structure.getEnum('high-emphasis', { true: true, false: false }) : false;
+
+const showIcon = structure.type === 'INSTANCE' ? structure.getBoolean('isIconBefore') : false;
+
+// `DsButtonV3.icon` is an icon-name string. Swapped icons keep the placeholder layer
+// name (e.g. `DAP_GM_O_check_circle`), so resolve via Code Connect ID or metadata.
+const toIconName = (name: string): string =>
+	name
+		.replace(/^DAP_DAP_/, 'DAP_')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_outline_icon\//, '')
+		.replace(/^DAP_/, '')
+		.replace(/^\/+/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+
+const iconNameFromCodeConnectId = (id: string | null): string | undefined => {
+	if (!id) {
+		return undefined;
+	}
+	if (id.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+	return undefined;
+};
+
+const resolveIcon = (iconInstance: figma.InstanceHandle): string | undefined => {
+	const fromCcId = iconNameFromCodeConnectId(iconInstance.codeConnectId());
+	if (fromCcId) {
+		return fromCcId;
+	}
+
+	const iconFromMetadata = iconInstance.executeTemplate().metadata?.props?.icon;
+	if (typeof iconFromMetadata === 'string') {
+		return iconFromMetadata;
+	}
+
+	return toIconName(iconInstance.name);
+};
+
+const leadingIcon = structure.type === 'INSTANCE' ? structure.getInstanceSwap('iconBefore') : undefined;
+const iconFromSwap = leadingIcon?.type === 'INSTANCE' ? resolveIcon(leadingIcon) : undefined;
+const iconFromChild =
+	structure.type === 'INSTANCE'
+		? structure
+				.findConnectedInstances((node) => node.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+					traverseInstances: true,
+				})
+				.find((node): node is figma.InstanceHandle => node.type === 'INSTANCE')
+		: undefined;
+const icon = iconFromSwap ?? (iconFromChild ? resolveIcon(iconFromChild) : undefined);
+
+const labelNode = instance.findText('Button', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Button';
+
+const iconProp = icon ? figma.code` icon="${icon}"` : '';
+const disabledProp = disabled ? ' disabled' : '';
+const loadingProp = loading ? ' loading' : '';
+const highEmphasisProp = highEmphasis ? ' highEmphasis' : '';
+
+export default {
+	example: iconOnly
+		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}${iconProp} aria-label="${label}" />`
+		: showIcon && icon
+			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp} icon="${icon}">${label}</DsButtonV3>`
+			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}>${label}</DsButtonV3>`,
+	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
+	id: 'ds-button-v4',
+	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-comment-bubble/ds-comment-bubble.figma.ts

@@ -0,0 +1,52 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=18638-7430
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-bubble
+// component=DsCommentBubble
+//
+// `DsCommentBubbleV1` is the floating comment bubble. Its Figma `type` axis
+// (`initial` / `start typing` vs `open`) selects between the empty compose state and
+// a thread; in code this is driven by whether the `comment` prop is present, so the
+// snippet emits `comment` / `currentUser` identifier placeholders for the developer to
+// wire to state. The `action required` axis maps to `hideActionRequired` (the
+// `no checkbox` variant hides the control); `State` is visual only and has no prop.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const bubbleType =
+	instance.getEnum('type', {
+		initial: 'compose',
+		'start typing': 'compose',
+		open: 'thread',
+	}) ?? 'compose';
+
+const hideActionRequired =
+	instance.getEnum('action required', {
+		'no checkbox': true,
+		false: false,
+		true: false,
+	}) ?? false;
+
+const hideActionRequiredAttr = hideActionRequired ? '\n\thideActionRequired' : '';
+
+export default {
+	example:
+		bubbleType === 'thread'
+			? figma.code`<DsCommentBubble
+	comment={comment}
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`
+			: figma.code`<DsCommentBubble
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`,
+	imports: ["import { DsCommentBubble } from '@drivenets/design-system';"],
+	id: 'ds-comment-bubble',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=18166-58292
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-card
+// component=DsCommentCard
+//
+// `DsCommentCardV1` composes the inner `Structure_CommentCardV1`. Its `overflow` axis
+// maps directly to the `overflow` prop. The `type` axis is interaction state
+// (default/hover are visual and CSS-driven — only `disabled` maps to a prop),
+// mirroring `ds-card.figma.ts`. The `action required` axis is encoded in the `comment`
+// data (`isActionRequired`), not a prop. `comment` is a data object that is not
+// derivable from Figma, so it is emitted as an identifier placeholder for the
+// developer to wire (see `ds-smart-tabs.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state =
+	instance.getEnum('type', {
+		default: 'default',
+		hover: 'default',
+		disabled: 'disabled',
+	}) ?? 'default';
+
+const overflow =
+	instance.getEnum('overflow', {
+		hidden: 'hidden',
+		displayed: 'displayed',
+	}) ?? 'hidden';
+
+const disabledAttr = state === 'disabled' ? ' disabled' : '';
+
+export default {
+	example: figma.code`<DsCommentCard comment={comment} overflow="${overflow}"${disabledAttr} />`,
+	imports: ["import { DsCommentCard } from '@drivenets/design-system';"],
+	id: 'ds-comment-card',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19208-6889
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-indicator
+// component=DsCommentIndicator
+//
+// The linked node is `Structure_CommentIndicatorV1`, the inner structure shared by the
+// indicator variants. The `type` axis (placeholder / default / action-required) maps
+// directly to the `type` prop; on the bare structure node it has no value, so it falls
+// back to `default`. For the `placeholder` state no avatar is shown; the `default` /
+// `action-required` states carry the initiator's avatar. `avatarSrc` is a photo URL
+// and `avatarName` is content — neither is derivable from Figma — so `avatarName` is
+// emitted as a placeholder for the developer to fill in (see `ds-avatar.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type =
+	instance.getEnum('type', {
+		placeholder: 'placeholder',
+		default: 'default',
+		'action-required': 'action-required',
+		'action required': 'action-required',
+	}) ?? 'default';
+
+export default {
+	example:
+		type === 'placeholder'
+			? figma.code`<DsCommentIndicator type="placeholder" onClick={() => {}} />`
+			: figma.code`<DsCommentIndicator type="${type}" avatarName="Full Name" onClick={() => {}} />`,
+	imports: ["import { DsCommentIndicator } from '@drivenets/design-system';"],
+	id: 'ds-comment-indicator',
+	metadata: { nestable: true },
+} 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-comments-drawer/ds-comments-drawer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19346-10511
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comments-drawer
+// component=DsCommentsDrawer
+//
+// `DsCommentsDrawerV1` is the comments side panel. Unlike `ds-drawer` / `ds-modal` it
+// does not compose its children through slots: the toolbar, search, and the comment
+// list are all internal, and the cards are rendered from the `comments` data array.
+// There is therefore nothing to resolve via `executeTemplate` — the snippet emits
+// `comments` / `onOpenChange` identifier placeholders for the developer to wire to
+// state. The Figma `Type` axis (`Default` / `Regular`) has no `DsCommentsDrawer` prop
+// equivalent — both render the same composition.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsCommentsDrawer open comments={comments} onOpenChange={() => {}} />`,
+	imports: ["import { DsCommentsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-comments-drawer',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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;